|
|
@@ -1,30 +1,112 @@
|
|
|
<template>
|
|
|
- <custom-layout class="main">
|
|
|
- <el-col :span="24" class="one" v-loading="loading">
|
|
|
- <div class="w_1300">
|
|
|
- <div class="info_1"></div>
|
|
|
- <div class="info_2">
|
|
|
- <div class="info_name">{{ info.title || '暂无' }}</div>
|
|
|
- <div class="info_brief">
|
|
|
- <div v-html="info.brief"></div>
|
|
|
- </div>
|
|
|
- <div class="info_friend" v-if="info.partner && info.partner.length > 0">
|
|
|
- <div class="info_title">
|
|
|
- <el-image class="image" :src="left" fit="fill" />
|
|
|
- <div class="title">合作伙伴</div>
|
|
|
- <el-image class="image" :src="right" fit="fill" />
|
|
|
+ <custom-layout class="main" v-loading="loading">
|
|
|
+ <el-col :span="24" class="one" v-if="info.carousel && info.carousel.length > 0">
|
|
|
+ <el-carousel height="680px">
|
|
|
+ <el-carousel-item v-for="(item, index) in info.carousel" :key="index">
|
|
|
+ <el-image class="image" :src="getUrl(item)" fit="fill" @click="toRedirect(item)" />
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <div class="title animate__animated animate__fadeInDown">
|
|
|
+ <div class="title_1">新闻中心</div>
|
|
|
+ <div class="title_2">News Center</div>
|
|
|
+ </div>
|
|
|
+ <div class="one_1 w_1300">
|
|
|
+ <el-collapse v-model="activeName" accordion>
|
|
|
+ <el-collapse-item v-for="(item, index) in info.news" :key="index" :title="item.title" :name="index">
|
|
|
+ <div class="list_1">
|
|
|
+ <div class="left textOne">{{ item.title || '暂无' }}</div>
|
|
|
+ <div class="right">{{ moment(item.time).format('YYYY-MM-DD') || '暂无' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list_2">
|
|
|
+ <el-image class="image" :src="getFile(item.logo)" fit="fill" />
|
|
|
+ <div v-if="item.content" v-html="item.content"></div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <div class="title animate__animated animate__fadeInDown">
|
|
|
+ <div class="title_1">企业成员</div>
|
|
|
+ <div class="title_2">Enterprise Members</div>
|
|
|
+ </div>
|
|
|
+ <div class="one_2 w_1300">
|
|
|
+ <swiper :modules="modules" :slides-per-view="3" :space-between="10" :loop="true" :autoplay="{ delay: 4000, disableOnInteraction: false }" navigation :pagination="{ clickable: true }" @swiper="onSwiper" @sliderChange="onSliderChange">
|
|
|
+ <template v-slot:button-prev>
|
|
|
+ <div class="swiper-button-prev" @click="prevBtn">
|
|
|
+ <el-image class="image" :src="icon_slh" fit="fill" />
|
|
|
</div>
|
|
|
+ </template>
|
|
|
+ <swiper-slide v-for="(item, index) in info.companyPerson" :key="index" :virtual-index="index">
|
|
|
<div class="list">
|
|
|
- <div class="other_1" v-for="(tag, indexx) in info.partner" :key="indexx">
|
|
|
- <el-image class="image" :src="getUrl(tag.url)" fit="fill">
|
|
|
- <template v-slot:error>
|
|
|
- <el-image class="image" :src="friend" fit="fill" />
|
|
|
- </template>
|
|
|
- </el-image>
|
|
|
- <div class="name">{{ tag.name }}</div>
|
|
|
- </div>
|
|
|
+ <el-image class="image" :src="getFile(item.logo)">
|
|
|
+ <template v-slot:error>
|
|
|
+ <el-image :src="friend" />
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
+ <div class="name">{{ item.name || '暂无名称' }}</div>
|
|
|
+ <div class="other_1">部门：{{ item.department }}</div>
|
|
|
+ <div class="other_1">职位：{{ item.position }}</div>
|
|
|
+ <div class="brief" v-if="item.content" v-html="item.content"></div>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ <template v-slot:button-next>
|
|
|
+ <div class="swiper-button-next" @click="nextBtn">
|
|
|
+ <el-image class="image" :src="icon_srh" fit="fill" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ </swiper>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <div class="one_3">
|
|
|
+ <el-carousel height="900px">
|
|
|
+ <el-carousel-item>
|
|
|
+ <div class="title animate__animated animate__fadeInDown">
|
|
|
+ <div class="title_1">简介</div>
|
|
|
+ <div class="title_2">Brief Introduction</div>
|
|
|
+ </div>
|
|
|
+ <div class="thr w_1300" v-if="info.brief" v-html="info.brief"></div>
|
|
|
+ </el-carousel-item>
|
|
|
+ <el-carousel-item>
|
|
|
+ <div class="title animate__animated animate__fadeInDown">
|
|
|
+ <div class="title_1">发展进程</div>
|
|
|
+ <div class="title_2">Development Process</div>
|
|
|
+ </div>
|
|
|
+ <div class="thr w_1300" v-if="info.process" v-html="info.process"></div>
|
|
|
+ </el-carousel-item>
|
|
|
+ <el-carousel-item>
|
|
|
+ <div class="title animate__animated animate__fadeInDown">
|
|
|
+ <div class="title_1">合作情况</div>
|
|
|
+ <div class="title_2">Cooperation Situation</div>
|
|
|
+ </div>
|
|
|
+ <div class="thr w_1300" v-if="info.situation" v-html="info.situation"></div>
|
|
|
+ </el-carousel-item>
|
|
|
+ <el-carousel-item>
|
|
|
+ <div class="title animate__animated animate__fadeInDown">
|
|
|
+ <div class="title_1">重大活动</div>
|
|
|
+ <div class="title_2">Major Events</div>
|
|
|
+ </div>
|
|
|
+ <div class="thr w_1300" v-if="info.activity" v-html="info.activity"></div>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <div class="title animate__animated animate__fadeInDown">
|
|
|
+ <div class="title_1">合作伙伴</div>
|
|
|
+ <div class="title_2">Cooperative Partner</div>
|
|
|
+ </div>
|
|
|
+ <div class="one_4 w_1300">
|
|
|
+ <div class="list" v-for="(item, index) in info.partner" :key="index">
|
|
|
+ <el-image class="image" :src="getFile(item.url)" fit="fill">
|
|
|
+ <template v-slot:error>
|
|
|
+ <el-image :src="friend" fit="fill" />
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
+ <div class="name">{{ item.name }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -32,23 +114,38 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import moment from 'moment'
|
|
|
+import icon_slh from '/images/icon_slh.png'
|
|
|
+import icon_srh from '/images/icon_srh.png'
|
|
|
import friend from '/images/friend.jpeg'
|
|
|
import { get } from 'lodash-es'
|
|
|
-import left from '/images/top-left.png'
|
|
|
-import right from '/images/top-right.png'
|
|
|
+// Import Swiper Vue.js components
|
|
|
+import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
|
+import { Autoplay, Pagination, Navigation, Virtual } from 'swiper/modules'
|
|
|
+// Import Swiper styles
|
|
|
+import 'swiper/css'
|
|
|
+import 'swiper/css/navigation'
|
|
|
+import 'swiper/css/pagination'
|
|
|
+import 'swiper/css/scrollbar'
|
|
|
+// 在 modules 加入要使用的模块
|
|
|
+const modules = reactive([Autoplay, Pagination, Navigation, Virtual])
|
|
|
// 接口
|
|
|
import { SectorStore } from '@/store/api/platform/sector'
|
|
|
const store = SectorStore()
|
|
|
+
|
|
|
// 加载中
|
|
|
const loading = ref(false)
|
|
|
// 路由
|
|
|
const route = useRoute()
|
|
|
|
|
|
const info = ref({})
|
|
|
+const activeName = ref(0)
|
|
|
+
|
|
|
// 请求
|
|
|
onMounted(async () => {
|
|
|
loading.value = true
|
|
|
await search()
|
|
|
+ await onSwiper()
|
|
|
loading.value = false
|
|
|
})
|
|
|
const search = async () => {
|
|
|
@@ -59,90 +156,189 @@ const search = async () => {
|
|
|
}
|
|
|
}
|
|
|
const getUrl = (item) => {
|
|
|
+ if (item) return `${import.meta.env.VITE_APP_HOST}${get(item, 'uri')}`
|
|
|
+}
|
|
|
+const getFile = (item) => {
|
|
|
if (item) return `${import.meta.env.VITE_APP_HOST}${get(item, '0.uri')}`
|
|
|
}
|
|
|
+let useSwiper = null
|
|
|
+// 初始化 swiper
|
|
|
+const onSwiper = (swiper) => {
|
|
|
+ useSwiper = swiper
|
|
|
+}
|
|
|
+
|
|
|
+// 滑动事件
|
|
|
+const onSliderChange = () => {
|
|
|
+ console.log('slide change')
|
|
|
+}
|
|
|
+
|
|
|
+// 通过实例方法自定义上一个下一个事件
|
|
|
+const prevBtn = () => {
|
|
|
+ useSwiper.slidePrev()
|
|
|
+}
|
|
|
+const nextBtn = () => {
|
|
|
+ useSwiper.slideNext()
|
|
|
+}
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.main {
|
|
|
.one {
|
|
|
- background: url(/images/friendbg.jpg) no-repeat;
|
|
|
- background-position: center top;
|
|
|
- .info_1 {
|
|
|
- padding: 30px 0;
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
- .info_2 {
|
|
|
- margin: 0 0 30px 0;
|
|
|
- min-height: 700px;
|
|
|
- padding: 40px;
|
|
|
- background-color: #fff;
|
|
|
- box-shadow: 0 0 13px 0 rgba(5, 88, 219, 0.18);
|
|
|
- .info_name {
|
|
|
- font-size: $global-font-size-22;
|
|
|
- font-weight: bold;
|
|
|
+ .title {
|
|
|
+ margin: 20px 0;
|
|
|
+ .title_1 {
|
|
|
+ font-size: 28px;
|
|
|
+ font-family: FZLanTingHei-EB-GBK;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #000;
|
|
|
text-align: center;
|
|
|
- margin: 0 0 40px 0;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
}
|
|
|
- .info_friend {
|
|
|
- .info_title {
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- justify-content: center;
|
|
|
- margin: 40px 0;
|
|
|
-
|
|
|
- .image:first-child {
|
|
|
- margin: 0 10px 0 0;
|
|
|
- }
|
|
|
- .title {
|
|
|
- font-size: $global-font-size-28;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .image:last-child {
|
|
|
- margin: 0 0 0 10px;
|
|
|
- }
|
|
|
+ .title_2 {
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: Arial;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ccc;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .one_1 {
|
|
|
+ .list_1 {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 47px;
|
|
|
+ border-bottom: 1px dashed #e5e5e5;
|
|
|
+ line-height: 47px;
|
|
|
+ padding-left: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ .left {
|
|
|
+ width: 92%;
|
|
|
+ font-size: $global-font-size-16;
|
|
|
}
|
|
|
- .list {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- .other_1 {
|
|
|
- margin: 0 5px;
|
|
|
- .image {
|
|
|
- width: 200px;
|
|
|
- height: 140px;
|
|
|
- }
|
|
|
- .name {
|
|
|
- margin: 10px 0 0 0;
|
|
|
- font-size: $global-font-size-20;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
+ .right {
|
|
|
+ color: #999;
|
|
|
+ font-size: $global-font-size-14;
|
|
|
}
|
|
|
}
|
|
|
- .info_brief {
|
|
|
- margin: 10px 0 0 0;
|
|
|
+ .list_2 {
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .one_2 {
|
|
|
+ height: 600px;
|
|
|
+ .list {
|
|
|
+ margin: 10px;
|
|
|
+ width: 95%;
|
|
|
+ min-height: 562px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 30px 0px;
|
|
|
+ -moz-transition: all 0.3s ease-out;
|
|
|
+ -o-transition: all 0.3s ease-out;
|
|
|
+ transition: all 0.3s ease-out;
|
|
|
+ -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
|
|
|
+ -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
|
|
|
+ -o-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
|
|
|
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
|
|
|
+ text-align: center;
|
|
|
+ .image {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 80px;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ font-size: 25px;
|
|
|
+ line-height: 70px;
|
|
|
+ text-align: center;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .other_1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ color: #2dbef0;
|
|
|
+ }
|
|
|
+ .brief {
|
|
|
+ margin: 10px 20px;
|
|
|
+ max-height: 300px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .one_3 {
|
|
|
+ min-height: 900px;
|
|
|
+ background: url(/images/industryBg.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ .title {
|
|
|
+ margin: 20px 0;
|
|
|
+ .title_1 {
|
|
|
+ font-size: 28px;
|
|
|
+ font-family: FZLanTingHei-EB-GBK;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ }
|
|
|
+ .title_2 {
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: Arial;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .thr {
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: FZLanTingHei-EB-GBK;
|
|
|
+ color: #fff !important;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .one_4 {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 20px auto;
|
|
|
+ .list {
|
|
|
+ width: 250px !important;
|
|
|
+ height: 330px;
|
|
|
+ box-shadow: 0 0 18px 2px #ececec;
|
|
|
+ transition: all 0.5s;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ .image {
|
|
|
+ width: 200px;
|
|
|
+ height: 140px;
|
|
|
+ margin: 40px auto;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #767676;
|
|
|
+ margin: 20px 0 12px 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list:hover {
|
|
|
+ transform: sesle(1.02);
|
|
|
+ background: #189aee;
|
|
|
+ .name {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- :deep(table) {
|
|
|
- border-collapse: collapse !important;
|
|
|
- width: 100% !important;
|
|
|
- text-align: center !important;
|
|
|
- }
|
|
|
-
|
|
|
- :deep(th) {
|
|
|
- border: 1px solid #ddd !important;
|
|
|
- padding: 8px !important;
|
|
|
- }
|
|
|
-
|
|
|
- :deep(td) {
|
|
|
- border: 1px solid #ddd !important;
|
|
|
- padding: 8px !important;
|
|
|
- }
|
|
|
- :deep(table tr:nth-child(even)) {
|
|
|
- background-color: #f2f2f2 !important;
|
|
|
- }
|
|
|
-
|
|
|
- :deep(table tr:hover) {
|
|
|
- background-color: #ddd !important;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
