|
|
@@ -2,240 +2,455 @@
|
|
|
<div id="index">
|
|
|
<el-row>
|
|
|
<el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
|
|
|
- <el-col :span="24" class="one">
|
|
|
- <el-carousel height="200px">
|
|
|
- <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 :span="24" class="science">
|
|
|
+ <el-image class="image" :src="science" fit="fill" />
|
|
|
</el-col>
|
|
|
- <el-col :span="24" class="two"> 创高创新 · 共赢未来 </el-col>
|
|
|
- <el-col :span="24" class="thr">
|
|
|
- <div class="w_1200" v-for="(item, index) in list" :key="index">
|
|
|
- <el-col :span="24" class="thr_1" v-if="(index + 1) % 2 == 0">
|
|
|
- <el-col :span="12" class="left">
|
|
|
- <el-image class="image" :src="item.url" fit="fill" />
|
|
|
+ <div class="w_1200">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <el-col :span="24" class="one_1">
|
|
|
+ <el-col :span="12" class="left">汇聚科技创新的创新赛道</el-col>
|
|
|
+ <el-col :span="12" class="right" @click="topMore">查看全部项目</el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="one_2">
|
|
|
+ <el-col :span="4" class="left">
|
|
|
+ <el-col
|
|
|
+ :span="24"
|
|
|
+ class="list"
|
|
|
+ v-for="(item, index) in typeList"
|
|
|
+ :key="index"
|
|
|
+ @mouseover="mouseOver(item)"
|
|
|
+ >
|
|
|
+ <el-col :span="6" class="image">
|
|
|
+ <el-image class="image" :src="item.url" fit="fill" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="18" class="title">{{ item.title }}</el-col>
|
|
|
+ </el-col>
|
|
|
</el-col>
|
|
|
- <el-col :span="12" class="right">
|
|
|
- <el-col :span="24" class="title">{{ item.title }}</el-col>
|
|
|
- <el-col :span="12" class="brief">{{ item.brief }} </el-col>
|
|
|
- <el-col :span="24" class="right">
|
|
|
- <a-button type="primary" ghost @click="toMore(item.href)">了解更多</a-button>
|
|
|
+ <el-col :span="20" class="right">
|
|
|
+ <el-col
|
|
|
+ :span="7"
|
|
|
+ class="list"
|
|
|
+ v-for="(item, index) in list"
|
|
|
+ :key="index"
|
|
|
+ @click="toView(item)"
|
|
|
+ >
|
|
|
+ <el-col :span="24" class="name">{{ item.name || '暂无项目名称' }}</el-col>
|
|
|
+ <el-col :span="24" class="brief textOver">
|
|
|
+ 项目介绍：{{ item.brief || '暂无项目介绍' }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <div>技术成熟度：{{ getDict(item.maturity, 'maturity') }}</div>
|
|
|
+ <div>合作类型：{{ getDict(item.cooperate, 'cooperate') }}</div>
|
|
|
+ </el-col>
|
|
|
+ <span class="key">{{ getDict(item.type, 'type') }}</span>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
- <el-col :span="24" class="thr_2" v-else>
|
|
|
- <el-col :span="12" class="left">
|
|
|
- <el-col :span="24" class="title">{{ item.title }}</el-col>
|
|
|
- <el-col :span="12" class="brief">{{ item.brief }} </el-col>
|
|
|
- <el-col :span="24" class="right">
|
|
|
- <a-button type="primary" ghost @click="toMore(item.href)">了解更多</a-button>
|
|
|
- </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <el-col :span="24" class="one_1">
|
|
|
+ <el-col :span="12" class="left">汇聚各种行业的专家</el-col>
|
|
|
+ <el-col :span="12" class="right" @click="toeMore">查看更多专家</el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="one_3">
|
|
|
+ <el-col :span="24" class="table_1">
|
|
|
+ <el-col :span="2" class="title">姓名</el-col>
|
|
|
+ <el-col :span="3" class="title">所在地</el-col>
|
|
|
+ <el-col :span="3" class="title">学历/职称</el-col>
|
|
|
+ <el-col :span="3" class="title">技术领域</el-col>
|
|
|
+ <el-col :span="3" class="title">工作单位</el-col>
|
|
|
+ <el-col :span="6" class="title">研究方向</el-col>
|
|
|
+ <el-col :span="4" class="title">操作</el-col>
|
|
|
</el-col>
|
|
|
- <el-col :span="12" class="right">
|
|
|
- <el-image class="image" :src="item.url" fit="fill" />
|
|
|
+ <el-col :span="24" class="table_2">
|
|
|
+ <vue3-seamless-scroll
|
|
|
+ :list="exportList"
|
|
|
+ :hover="true"
|
|
|
+ :step="0.5"
|
|
|
+ :wheel="true"
|
|
|
+ :isWatch="true"
|
|
|
+ >
|
|
|
+ <el-col
|
|
|
+ :span="24"
|
|
|
+ class="list"
|
|
|
+ v-for="(item, index) in exportList"
|
|
|
+ :key="index"
|
|
|
+ @click="toeView(item)"
|
|
|
+ >
|
|
|
+ <el-col :span="2" class="content textOver">
|
|
|
+ <el-tooltip effect="dark" :content="item.name" placement="top">
|
|
|
+ {{ item.name || '暂无名称' }}
|
|
|
+ </el-tooltip>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" class="content textOver">
|
|
|
+ {{ getArea(item.area || '暂无地区') }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" class="content textOver">
|
|
|
+ {{ getDict(item.education || '学历/职称', 'maturity') }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" class="content textOver">
|
|
|
+ {{ getDict(item.field || '暂无技术领域', 'maturity') }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" class="content textOver">
|
|
|
+ {{ item.unit || '暂无工作单位' }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" class="content textOver">
|
|
|
+ {{ item.direction || '暂无研究方向' }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" class="content textOver">
|
|
|
+ <el-button @click="toChat(item)" type="primary" size="small">
|
|
|
+ 联络专家
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </vue3-seamless-scroll>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="four">
|
|
|
- <el-col :span="24" class="four_1">创新平台</el-col>
|
|
|
- <el-col :span="24" class="four_2"
|
|
|
- >灵感一触即发，成果就在眼前。创新创业，点亮未来。</el-col
|
|
|
- >
|
|
|
- <el-col :span="24" class="four_3 w_1200">
|
|
|
- <div v-for="(item, index) in otherList" :key="index">
|
|
|
- <div class="list">
|
|
|
- <el-col :span="24" class="list_1">
|
|
|
- <el-image class="image" :src="item.url" fit="fill"
|
|
|
- /></el-col>
|
|
|
- <el-col :span="24" class="list_2">{{ item.title }}</el-col>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</el-col>
|
|
|
- </el-col>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-const router = useRouter()
|
|
|
+const $checkRes = inject('$checkRes')
|
|
|
+import { get } from 'lodash-es'
|
|
|
+// 接口
|
|
|
+import { DictDataStore } from '@/store/api/system/dictData'
|
|
|
+import { ProjectStore } from '@/store/api/platform/project'
|
|
|
+const store = ProjectStore()
|
|
|
+const dictDataStore = DictDataStore()
|
|
|
+// 路由
|
|
|
+const route = useRoute()
|
|
|
// 图片引入
|
|
|
-import video_1 from '@/assets/video_1.png'
|
|
|
-import video_2 from '@/assets/video_2.jpg'
|
|
|
-import home_1 from '@/assets/home_1.png'
|
|
|
-import home_2 from '@/assets/home_2.png'
|
|
|
-import home_3 from '@/assets/home_3.png'
|
|
|
-import home_4 from '@/assets/home_4.png'
|
|
|
+import science from '@/assets/bg.png'
|
|
|
+import science_1 from '@/assets/science_1.png'
|
|
|
+import science_2 from '@/assets/science_2.png'
|
|
|
+import science_3 from '@/assets/science_3.png'
|
|
|
+import science_4 from '@/assets/science_4.png'
|
|
|
+import science_5 from '@/assets/science_5.png'
|
|
|
+import science_6 from '@/assets/science_6.png'
|
|
|
+import science_7 from '@/assets/science_7.png'
|
|
|
+import science_8 from '@/assets/science_8.png'
|
|
|
+import science_9 from '@/assets/science_9.png'
|
|
|
// 加载中
|
|
|
const loading = ref(false)
|
|
|
-const carouselList = ref([{ url: video_1 }, { url: video_2 }, { url: video_1 }])
|
|
|
-const list = ref([
|
|
|
+const typeList = ref([
|
|
|
+ { url: science_1, title: '生物技术', type: '0' },
|
|
|
+ { url: science_2, title: '信息技术', type: '1' },
|
|
|
+ { url: science_3, title: '新材料', type: '2' },
|
|
|
+ { url: science_4, title: '新能源', type: '3' },
|
|
|
+ { url: science_5, title: '智能制造', type: '4' },
|
|
|
+ { url: science_6, title: '光电芯片', type: '5' },
|
|
|
+ { url: science_7, title: '人工智能', type: '6' },
|
|
|
+ { url: science_8, title: '航空航天', type: '7' },
|
|
|
+ { url: science_9, title: '其他', type: '8' }
|
|
|
+])
|
|
|
+const list = ref([])
|
|
|
+const projectList = ref([])
|
|
|
+const maturityList = ref([])
|
|
|
+const industryList = ref([])
|
|
|
+// 专家
|
|
|
+const exportList = ref([
|
|
|
+ {
|
|
|
+ name: '黄教授',
|
|
|
+ area: ['吉林省', '长春市'],
|
|
|
+ education: '0',
|
|
|
+ field: '0',
|
|
|
+ direction: '半导体新材料制备与应用技术'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '黄教授',
|
|
|
+ area: ['吉林省', '长春市'],
|
|
|
+ education: '0',
|
|
|
+ field: '0',
|
|
|
+ direction: '半导体新材料制备与应用技术'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '黄教授',
|
|
|
+ area: ['吉林省', '长春市'],
|
|
|
+ education: '0',
|
|
|
+ field: '0',
|
|
|
+ direction: '半导体新材料制备与应用技术'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '黄教授',
|
|
|
+ area: ['吉林省', '长春市'],
|
|
|
+ education: '0',
|
|
|
+ field: '0',
|
|
|
+ direction: '半导体新材料制备与应用技术'
|
|
|
+ },
|
|
|
{
|
|
|
- title: '政策新闻',
|
|
|
- href: 'news',
|
|
|
- brief: '推动政策落地，让每一分投入都发挥最大效益，让每一步行动都引领未来发展。',
|
|
|
- url: home_1
|
|
|
+ name: '黄教授',
|
|
|
+ area: ['吉林省', '长春市'],
|
|
|
+ education: '0',
|
|
|
+ field: '0',
|
|
|
+ direction: '半导体新材料制备与应用技术'
|
|
|
},
|
|
|
{
|
|
|
- title: '供需商城',
|
|
|
- href: 'demand',
|
|
|
- brief: '我们向您献上最诚挚的敬意，希望我们能一起开拓更广阔的合作领域。',
|
|
|
- url: home_2
|
|
|
+ name: '黄教授',
|
|
|
+ area: ['吉林省', '长春市'],
|
|
|
+ education: '0',
|
|
|
+ field: '0',
|
|
|
+ direction: '半导体新材料制备与应用技术'
|
|
|
},
|
|
|
- { title: '创新大赛', href: 'innovation', brief: '科技点亮希望,创新改变世界。', url: home_3 },
|
|
|
{
|
|
|
- title: '成果展示',
|
|
|
- href: 'achievement',
|
|
|
- brief: '通过不懈的努力，我们成功地完成了项目目标，取得了显著的成果。',
|
|
|
- url: home_4
|
|
|
+ name: '黄教授',
|
|
|
+ area: ['吉林省', '长春市'],
|
|
|
+ education: '0',
|
|
|
+ field: '0',
|
|
|
+ direction: '半导体新材料制备与应用技术'
|
|
|
},
|
|
|
{
|
|
|
- title: '新闻资讯',
|
|
|
- href: 'brain',
|
|
|
- brief: '新闻资讯也指一个集中的空间，能够在企业创办初期举步维艰时，提供资金、管理等多种便利。',
|
|
|
- url: home_1
|
|
|
+ name: '黄教授',
|
|
|
+ area: ['吉林省', '长春市'],
|
|
|
+ education: '0',
|
|
|
+ field: '0',
|
|
|
+ direction: '半导体新材料制备与应用技术'
|
|
|
}
|
|
|
])
|
|
|
-const otherList = ref([
|
|
|
- { title: '汽车电子', url: home_1 },
|
|
|
- { title: '碳纤维', url: home_2 },
|
|
|
- { title: '光电', url: home_3 },
|
|
|
- { title: '农产品', url: home_4 },
|
|
|
- { title: '车芯片', url: home_1 },
|
|
|
- { title: '人工智能', url: home_1 },
|
|
|
- { title: '生物基', url: home_2 },
|
|
|
- { title: '新能源', url: home_3 },
|
|
|
- { title: '遥感卫星', url: home_4 },
|
|
|
- { title: '天然气', url: home_1 },
|
|
|
- { title: '精密仪器', url: home_4 },
|
|
|
- { title: '生物医药', url: home_1 }
|
|
|
-])
|
|
|
// 请求
|
|
|
onMounted(async () => {
|
|
|
loading.value = true
|
|
|
- search()
|
|
|
+ await searchOther()
|
|
|
+ await search()
|
|
|
loading.value = false
|
|
|
})
|
|
|
-const search = async () => {}
|
|
|
-const toMore = inject('selectMenu')
|
|
|
+const searchOther = async () => {
|
|
|
+ let result
|
|
|
+ // 合作类型
|
|
|
+ result = await dictDataStore.query({ code: 'projectType', is_use: '0' })
|
|
|
+ if ($checkRes(result)) projectList.value = result.data
|
|
|
+ // 成熟度
|
|
|
+ result = await dictDataStore.query({ code: 'projectMaturity', is_use: '0' })
|
|
|
+ if ($checkRes(result)) maturityList.value = result.data
|
|
|
+ // 行业分类
|
|
|
+ result = await dictDataStore.query({ code: 'industry', is_use: '0' })
|
|
|
+ if ($checkRes(result)) industryList.value = result.data
|
|
|
+}
|
|
|
+const search = async (data) => {
|
|
|
+ const info = {
|
|
|
+ skip: 0,
|
|
|
+ limit: 9,
|
|
|
+ is_use: '0',
|
|
|
+ status: '1'
|
|
|
+ }
|
|
|
+ if (data?.type) info.type = data.type
|
|
|
+ const res = await store.query(info)
|
|
|
+ if (res.errcode == '0') list.value = res.data
|
|
|
+}
|
|
|
+// 字典数据转换
|
|
|
+const getDict = (data, model) => {
|
|
|
+ let res
|
|
|
+ if (model == 'cooperate') res = projectList.value.find((f) => f.value == data)
|
|
|
+ else if (model == 'maturity') res = maturityList.value.find((f) => f.value == data)
|
|
|
+ else if (model == 'type') res = industryList.value.find((f) => f.value == data)
|
|
|
+ return get(res, 'label')
|
|
|
+}
|
|
|
+// 地区显示
|
|
|
+const getArea = (data) => {
|
|
|
+ if (data) return data.join(',')
|
|
|
+}
|
|
|
+// 查看详情
|
|
|
+const toView = (item) => {
|
|
|
+ console.log(item)
|
|
|
+}
|
|
|
+// 查询
|
|
|
+const mouseOver = (item) => {
|
|
|
+ search({ type: item.type })
|
|
|
+}
|
|
|
+// 联络专家
|
|
|
+const toChat = (item) => {
|
|
|
+ console.log(item)
|
|
|
+}
|
|
|
+// 查看专家详情
|
|
|
+const toeView = (item) => {
|
|
|
+ console.log(item)
|
|
|
+}
|
|
|
+// 查看更多项目
|
|
|
+const topMore = () => {}
|
|
|
+// 查看更多专家
|
|
|
+const toeMore = () => {}
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.main {
|
|
|
- .two {
|
|
|
- text-align: center;
|
|
|
- font-size: 28px;
|
|
|
- margin: 40px 0;
|
|
|
+ .science {
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .thr {
|
|
|
- margin: 10px 0;
|
|
|
-
|
|
|
- .thr_1 {
|
|
|
+ .one {
|
|
|
+ padding: 25px 0;
|
|
|
+ .one_1 {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
+ margin: 0 0 10px 0;
|
|
|
.left {
|
|
|
- .image {
|
|
|
- width: 90%;
|
|
|
- height: 350px;
|
|
|
- }
|
|
|
+ font-size: 24px;
|
|
|
+ font-family:
|
|
|
+ PingFangSC-Semibold,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #111;
|
|
|
+ line-height: 33px;
|
|
|
}
|
|
|
-
|
|
|
.right {
|
|
|
- .title {
|
|
|
- font-size: 20px;
|
|
|
- font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .title:hover {
|
|
|
- color: #3894ff;
|
|
|
- transform: translateY(-10px);
|
|
|
- /* 当鼠标悬停时，向上平移20像素 */
|
|
|
- }
|
|
|
-
|
|
|
- .brief {
|
|
|
- margin: 20px 0;
|
|
|
- font-size: 16px;
|
|
|
- font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
|
|
|
- }
|
|
|
+ text-align: right;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family:
|
|
|
+ PingFangSC-Regular,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #2280ff;
|
|
|
+ line-height: 14px;
|
|
|
+ display: block;
|
|
|
+ margin-top: 13px;
|
|
|
+ margin-right: 34px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .thr_2 {
|
|
|
+ .one_2 {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
.left {
|
|
|
- .title {
|
|
|
- font-size: 20px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .title:hover {
|
|
|
- color: #3894ff;
|
|
|
- transform: translateY(-10px);
|
|
|
- /* 当鼠标悬停时，向上平移20像素 */
|
|
|
+ padding: 10px;
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ padding: 15px;
|
|
|
+ border-radius: 8px;
|
|
|
+ .image {
|
|
|
+ text-align: center;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family:
|
|
|
+ PingFangSC-Regular,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #111;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .brief {
|
|
|
- margin: 20px 0;
|
|
|
- font-size: 16px;
|
|
|
+ .list:hover {
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: #2280ff;
|
|
|
+ .title {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
.right {
|
|
|
- .image {
|
|
|
- width: 90%;
|
|
|
- height: 350px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .list {
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family:
|
|
|
+ PingFangSC-Medium,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111;
|
|
|
+ line-height: 16px;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ margin: 12px 0;
|
|
|
+ }
|
|
|
+ .brief {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family:
|
|
|
+ PingFangSC-Regular,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family:
|
|
|
+ PingFangSC-Regular,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666;
|
|
|
+ line-height: 12px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ .key {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family:
|
|
|
+ PingFangSC-Regular,
|
|
|
+ PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999990;
|
|
|
+ line-height: 20px;
|
|
|
+ height: 22px;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid #dbdbdb;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list:nth-child(1n) {
|
|
|
+ background: linear-gradient(180deg, #d5e5ff, #fff);
|
|
|
+ }
|
|
|
+ .list:nth-child(2n) {
|
|
|
+ background: linear-gradient(180deg, #cbeff8, #fff);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
+ .one_3 {
|
|
|
+ margin: 10px;
|
|
|
|
|
|
- .four {
|
|
|
- background: #efefef;
|
|
|
- padding: 20px;
|
|
|
+ .table_1 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ height: 50px;
|
|
|
+ background-image: linear-gradient(90deg, #2171f6 0, #619bf5 100%);
|
|
|
+ line-height: 50px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 16px;
|
|
|
|
|
|
- .four_1 {
|
|
|
- text-align: center;
|
|
|
- font-size: 28px;
|
|
|
- margin: 40px 0 20px 0;
|
|
|
- }
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .four_2 {
|
|
|
- text-align: center;
|
|
|
- font-size: 16px;
|
|
|
- margin: 0 0 20px 0;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
+ .table_2 {
|
|
|
+ max-height: 400px;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
- .four_3 {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #666;
|
|
|
+ background: #fff;
|
|
|
|
|
|
- .list {
|
|
|
- width: 260px;
|
|
|
- margin: 20px;
|
|
|
- background: #ffffff;
|
|
|
- padding: 20px;
|
|
|
+ .content {
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
|
|
|
- .list_2 {
|
|
|
- text-align: center;
|
|
|
- margin: 10px 0 0 0;
|
|
|
- }
|
|
|
- .list_2:hover {
|
|
|
- color: #3894ff;
|
|
|
+ .content:hover {
|
|
|
+ color: #2374ff;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .list:hover {
|
|
|
- transform: translateY(-20px);
|
|
|
- /* 当鼠标悬停时，向上平移20像素 */
|
|
|
+ .list:nth-child(2n) {
|
|
|
+ background: #f4f4f4;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
