|
|
@@ -0,0 +1,575 @@
|
|
|
+<template>
|
|
|
+ <custom-layout class="main">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <el-image class="image" :src="news" fit="fill" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="two">
|
|
|
+ <div class="w_1200">
|
|
|
+ <el-col :span="24" class="two_1">
|
|
|
+ <el-row class="two_1_1" :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-row class="two_1_1_1">
|
|
|
+ <el-col :span="24" class="top1">
|
|
|
+ <el-carousel :interval="4000" type="card" height="200px" @change="toChange">
|
|
|
+ <el-carousel-item v-for="(item, index) in carouselList" :key="index">
|
|
|
+ <el-image class="image" :src="item.url" fit="fill" />
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="center1">
|
|
|
+ <el-col :span="24" class="title">{{ info.name }}</el-col>
|
|
|
+ <el-col :span="24" class="other_1" v-if="info.client">
|
|
|
+ 委托方： {{ info.client }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="other_1" v-if="info.partner">
|
|
|
+ 合作方： {{ info.partner }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="other_2">{{ info.brief }}</el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="bottom1">
|
|
|
+ <el-button @click="toView(info)" type="primary">查看详情</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="18">
|
|
|
+ <el-row class="two_1_1_2" :gutter="20">
|
|
|
+ <el-col
|
|
|
+ :span="6"
|
|
|
+ class="list"
|
|
|
+ v-for="(item, index) in list.slice(0, 8)"
|
|
|
+ :key="index"
|
|
|
+ @click="toView(item)"
|
|
|
+ >
|
|
|
+ <el-row>
|
|
|
+ <el-image class="image" :src="item.url" fit="fill" />
|
|
|
+ <el-col :span="24" class="other">
|
|
|
+ <el-col :span="24" class="title textOne">{{ item.name }}</el-col>
|
|
|
+ <el-col :span="24" class="other_2">{{ item.brief }}</el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="two_1_2">
|
|
|
+ <el-image class="image" :src="journal5" fit="fill" />
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="two_2">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="18" class="left">
|
|
|
+ <el-row class="left_1" :gutter="20">
|
|
|
+ <el-col
|
|
|
+ :span="6"
|
|
|
+ class="list"
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="index"
|
|
|
+ @click="toView(item)"
|
|
|
+ >
|
|
|
+ <el-row>
|
|
|
+ <el-image class="image" :src="item.url" fit="fill" />
|
|
|
+ <el-col :span="24" class="other">
|
|
|
+ <el-col :span="24" class="title textOne">{{ item.name }}</el-col>
|
|
|
+ <el-col :span="24" class="other_2">{{ item.brief }}</el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="right">
|
|
|
+ <el-row class="right">
|
|
|
+ <el-col :span="24" class="right_1">
|
|
|
+ <el-image class="image" :src="journal6" fit="fill" />
|
|
|
+ <div class="text">
|
|
|
+ <h5 class="title" style="padding-top: 0px">“他山之石”</h5>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="right_2">
|
|
|
+ <el-col :span="24" class="right_2_1">
|
|
|
+ <el-col :span="16" class="left">相关推荐 </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="content">
|
|
|
+ <a-timeline>
|
|
|
+ <a-timeline-item
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="index"
|
|
|
+ @click="toView(item)"
|
|
|
+ >
|
|
|
+ <div class="name textOne">{{ item.name }}</div>
|
|
|
+ </a-timeline-item>
|
|
|
+ </a-timeline>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="page">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :page-sizes="[10, 20, 50, 100, 200]"
|
|
|
+ :total="total"
|
|
|
+ :page-size="limit"
|
|
|
+ v-model:current-page="currentPage"
|
|
|
+ @current-change="changePage"
|
|
|
+ @size-change="sizeChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </custom-layout>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+// 图片引入
|
|
|
+import news from '/images/news.png'
|
|
|
+import journal1 from '/images/journal_1.jpeg'
|
|
|
+import journal2 from '/images/journal_2.jpeg'
|
|
|
+import journal3 from '/images/journal_3.jpeg'
|
|
|
+import journal4 from '/images/journal_4.jpeg'
|
|
|
+import journal5 from '/images/journal_5.jpg'
|
|
|
+import journal6 from '/images/journal_6.jpg'
|
|
|
+const carouselList = ref([
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal1,
|
|
|
+ name: '吉林省智能传感器产业链创新发展研究',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '吉林大学',
|
|
|
+ brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal2,
|
|
|
+ name: '吉林省玉米深加工产业链创新发展研究',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '省石化院',
|
|
|
+ brief: '针对产业锁条的堵点、断点，明确重需突破的关键共性技术，促进全首玉米深加工高质量发展'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal3,
|
|
|
+ name: '松原市玉米深加工产业园区高质量发展规划',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '吉林大学',
|
|
|
+ brief:
|
|
|
+ '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
|
|
|
+ }
|
|
|
+])
|
|
|
+const list = ref([
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal1,
|
|
|
+ name: '吉林省智能传感器产业链创新发展研究',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '吉林大学',
|
|
|
+ brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal2,
|
|
|
+ name: '吉林省玉米深加工产业链创新发展研究',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '省石化院',
|
|
|
+ brief: '针对产业锁条的堵点、断点，明确重需突破的关键共性技术，促进全首玉米深加工高质量发展'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal3,
|
|
|
+ name: '松原市玉米深加工产业园区高质量发展规划',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '吉林大学',
|
|
|
+ brief:
|
|
|
+ '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal4,
|
|
|
+ name: '吉林省肉牛(加工》产业发展研究',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '吉林大学',
|
|
|
+ brief:
|
|
|
+ '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal1,
|
|
|
+ name: '吉林省智能传感器产业链创新发展研究',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '吉林大学',
|
|
|
+ brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal2,
|
|
|
+ name: '吉林省玉米深加工产业链创新发展研究',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '省石化院',
|
|
|
+ brief: '针对产业锁条的堵点、断点，明确重需突破的关键共性技术，促进全首玉米深加工高质量发展'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal3,
|
|
|
+ name: '松原市玉米深加工产业园区高质量发展规划',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '吉林大学',
|
|
|
+ brief:
|
|
|
+ '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal4,
|
|
|
+ name: '吉林省肉牛(加工》产业发展研究',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '吉林大学',
|
|
|
+ brief:
|
|
|
+ '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal1,
|
|
|
+ name: '吉林省智能传感器产业链创新发展研究',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '吉林大学',
|
|
|
+ brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal2,
|
|
|
+ name: '吉林省玉米深加工产业链创新发展研究',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '省石化院',
|
|
|
+ brief: '针对产业锁条的堵点、断点，明确重需突破的关键共性技术，促进全首玉米深加工高质量发展'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal3,
|
|
|
+ name: '松原市玉米深加工产业园区高质量发展规划',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '吉林大学',
|
|
|
+ brief:
|
|
|
+ '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal4,
|
|
|
+ name: '吉林省肉牛(加工》产业发展研究',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '吉林大学',
|
|
|
+ brief:
|
|
|
+ '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal1,
|
|
|
+ name: '吉林省智能传感器产业链创新发展研究',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '吉林大学',
|
|
|
+ brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal2,
|
|
|
+ name: '吉林省玉米深加工产业链创新发展研究',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '省石化院',
|
|
|
+ brief: '针对产业锁条的堵点、断点，明确重需突破的关键共性技术，促进全首玉米深加工高质量发展'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal3,
|
|
|
+ name: '松原市玉米深加工产业园区高质量发展规划',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '吉林大学',
|
|
|
+ brief:
|
|
|
+ '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ url: journal4,
|
|
|
+ name: '吉林省肉牛(加工》产业发展研究',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '吉林大学',
|
|
|
+ brief:
|
|
|
+ '以松原市嘉吉生物化工产业园区为研究核心。提出推进产业基础高级化和产业现代化的政策保隐措施'
|
|
|
+ }
|
|
|
+])
|
|
|
+let skip = 0
|
|
|
+let limit = inject('limit')
|
|
|
+const total = ref(0)
|
|
|
+// 路由
|
|
|
+const router = useRouter()
|
|
|
+// 加载中
|
|
|
+const loading = ref(false)
|
|
|
+const info = ref({
|
|
|
+ id: '1',
|
|
|
+ url: journal1,
|
|
|
+ name: '吉林省智能传感器产业链创新发展研究',
|
|
|
+ client: '省工信厅',
|
|
|
+ partner: '吉林大学',
|
|
|
+ brief: '结合我曾经济发展特色和科研院所技术优势，明确产业发展方向'
|
|
|
+})
|
|
|
+// 请求
|
|
|
+onMounted(async () => {
|
|
|
+ loading.value = true
|
|
|
+ await search()
|
|
|
+ loading.value = false
|
|
|
+})
|
|
|
+const search = async () => {}
|
|
|
+// 轮播图改变
|
|
|
+const toChange = async (e) => {
|
|
|
+ info.value = carouselList.value[e]
|
|
|
+}
|
|
|
+// 查看详情
|
|
|
+const toView = async (item) => {
|
|
|
+ router.push({ path: '/study/detail', query: { id: item.id || item._id } })
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.main {
|
|
|
+ .one {
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two {
|
|
|
+ margin: 10px 0;
|
|
|
+ .two_1 {
|
|
|
+ .two_1_1 {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ .two_1_1_1 {
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 520px;
|
|
|
+ background: rgb(248, 248, 248);
|
|
|
+ .top1 {
|
|
|
+ margin: 30px 0 0 0;
|
|
|
+ }
|
|
|
+ .center1 {
|
|
|
+ .title {
|
|
|
+ font-size: $global-font-size-18;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #383838;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: left;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .title:hover {
|
|
|
+ color: #2374ff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .other_1 {
|
|
|
+ font-size: $global-font-size-18;
|
|
|
+ color: #9b9994;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ .other_2 {
|
|
|
+ line-height: $global-font-size-16;
|
|
|
+ font-size: $global-font-size-16;
|
|
|
+ height: 80px;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #1d1e20;
|
|
|
+ text-align: justify;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom1 {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .two_1_1_2 {
|
|
|
+ display: flex;
|
|
|
+ .list {
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 190px;
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+ .other {
|
|
|
+ .title {
|
|
|
+ font-size: $global-font-size-18;
|
|
|
+ margin: 10px 0;
|
|
|
+ color: #383838;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .title:hover {
|
|
|
+ color: #2374ff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .other_2 {
|
|
|
+ font-size: $global-font-size-16;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #1d1e20;
|
|
|
+ text-align: justify;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .two_1_2 {
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .two_2 {
|
|
|
+ margin: 10px 0 0 0;
|
|
|
+ .left {
|
|
|
+ .left_1 {
|
|
|
+ display: flex;
|
|
|
+ .list {
|
|
|
+ margin: 0 0 12px 0;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 185px;
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+ .other {
|
|
|
+ .title {
|
|
|
+ font-size: $global-font-size-18;
|
|
|
+ margin: 10px 0;
|
|
|
+ color: #383838;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .title:hover {
|
|
|
+ color: #2374ff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .other_2 {
|
|
|
+ font-size: $global-font-size-18;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #1d1e20;
|
|
|
+ text-align: justify;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ .right_1 {
|
|
|
+ position: relative;
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 5px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 8px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ background-image: none;
|
|
|
+ background-repeat: repeat;
|
|
|
+ background-position: 0 0;
|
|
|
+ background: -moz-linear-gradient(top, none, none);
|
|
|
+ background: -o-linear-gradient(top, none, none);
|
|
|
+ background: linear-gradient(top, none, none);
|
|
|
+ background: -webkit-gradient(linear, left top, left bottom, from(none), to(none));
|
|
|
+ box-sizing: border-box;
|
|
|
+ .title {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ font-size: $global-font-size-18;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: normal;
|
|
|
+ font-style: normal;
|
|
|
+ text-decoration: none;
|
|
|
+ font-family: Tahoma;
|
|
|
+ line-height: 34px;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-text-overflow: ellipsis;
|
|
|
+ -moz-text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right_2 {
|
|
|
+ .right_2_1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background: linear-gradient(90deg, #d7e8ff, #fff);
|
|
|
+ width: 300px;
|
|
|
+ height: 64px;
|
|
|
+ padding-left: 21px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 7px;
|
|
|
+ .left {
|
|
|
+ font-size: $global-font-size-26;
|
|
|
+ font-family:
|
|
|
+ PingFangSC-Medium,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ text-align: right;
|
|
|
+ font-size: $global-font-size-18;
|
|
|
+ font-family:
|
|
|
+ PingFangSC-Regular,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ margin: 10px 0 0 0;
|
|
|
+ .name {
|
|
|
+ max-height: 48px;
|
|
|
+ font-size: $global-font-size-18;
|
|
|
+ font-family:
|
|
|
+ PingFangSC-Medium,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111;
|
|
|
+ line-height: 24px;
|
|
|
+ display: block;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .name:hover {
|
|
|
+ color: #2374ff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
