补齐业务模块及新闻界面，添加导航定位
This commit is contained in:
wangchengming
parent
88e7197471
commit
17b7986e34
|
|
@ -148,32 +148,32 @@ export default {
|
|||
{
|
||||
title: '关于我们',
|
||||
children: [
|
||||
{ title: '简介' },
|
||||
{ title: '使命' },
|
||||
{ title: '远景' },
|
||||
{ title: '价值观' },
|
||||
{ title: '简介', path: '/fshg.cc/about#screen1' },
|
||||
{ title: '使命', path: '/fshg.cc/about#screen3' },
|
||||
{ title: '远景', path: '/fshg.cc/about#screen4' },
|
||||
{ title: '价值观', path: '/fshg.cc/about#screen5' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '业务领域',
|
||||
children: [
|
||||
{ title: '资本服务', path: '/business/capitalServices' },
|
||||
{ title: '高新技术', path: '/business/highTech' },
|
||||
{ title: '能源与环境', path: '/business/hnergyEnvironment' },
|
||||
{ title: '全球供应链', path: '/' },
|
||||
{ title: '商业管理', path: '/' },
|
||||
{ title: '健康产业', path: '/' },
|
||||
{ title: '基础设施', path: '/' },
|
||||
{ title: '未来农业', path: '/' },
|
||||
{ title: '资本服务', path: '/Cs.futurestar.cc' },
|
||||
{ title: '高新技术', path: '/Tech.futurestar.cc' },
|
||||
{ title: '能源与环境', path: '/EE.futurestar.cc' },
|
||||
{ title: '全球供应链', path: '/GSC.futurestar.cc' },
|
||||
{ title: '商业管理', path: '/BM.futurestar.cc' },
|
||||
{ title: '健康产业', path: '/HI.futurestar.cc' },
|
||||
{ title: '基础设施', path: '/BI.futurestar.cc' },
|
||||
{ title: '未来农业', path: '/FA.futurestar.cc' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '新闻咨询',
|
||||
title: '新闻资讯',
|
||||
children: [
|
||||
{ title: '公告通知', path: '/' },
|
||||
{ title: '公司咨询', path: '/' },
|
||||
{ title: '政策法规', path: '/' },
|
||||
{ title: '行业动态', path: '/' },
|
||||
{ title: '公告通知', path: '/newsTrend' },
|
||||
{ title: '公司资讯', path: '/companyInformation' },
|
||||
{ title: '政策法规', path: '/policyRegulations' },
|
||||
{ title: '行业动态', path: '/industryDynamics' },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -188,7 +188,7 @@ export default {
|
|||
title: '人才招募',
|
||||
children: [
|
||||
{ title: '人才战略', path: '/' },
|
||||
{ title: '招募信息', path: '/' },
|
||||
{ title: '招募信息', path: '/recruit/socialRecruit' },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
:key="menu.path"
|
||||
class="nav-menu"
|
||||
:class="{ 'current-route': $route.path.startsWith(menu.path) && menu.path !== '/' }"
|
||||
@click.stop="menu.children || $router.push(menu.path)"
|
||||
@click.stop="menu.children || $router.push({ path: menu.hash ? '' : menu.path , hash: menu?.hash || ''})"
|
||||
>
|
||||
<span>{{ menu.title }}</span>
|
||||
<div
|
||||
|
|
@ -86,20 +86,29 @@ export default {
|
|||
menus: [
|
||||
{
|
||||
title: '首页',
|
||||
path: '/',
|
||||
path: '/fshg.cc/home',
|
||||
},
|
||||
{ title: '关于我们', path: '/about/companyIntroduction' },
|
||||
{ title: '关于我们', path: '/fshg.cc/about' },
|
||||
{
|
||||
title: '业务领域',
|
||||
children: [
|
||||
{ title: '资本服务', path: '/business/capitalServices' },
|
||||
{ title: '高新技术', path: '/business/highTech' },
|
||||
{ title: '能源与环境', path: '/business/hnergyEnvironment' },
|
||||
{ title: '全球供应链', path: '/' },
|
||||
{ title: '商业管理', path: '/' },
|
||||
{ title: '健康产业', path: '/' },
|
||||
{ title: '基础设施', path: '/' },
|
||||
{ title: '未来农业', path: '/' },
|
||||
{ title: '资本服务', path: '/Cs.futurestar.cc' },
|
||||
{ title: '高新技术', path: '/Tech.futurestar.cc' },
|
||||
{ title: '能源与环境', path: '/EE.futurestar.cc' },
|
||||
{ title: '全球供应链', path: '/GSC.futurestar.cc' },
|
||||
{ title: '商业管理', path: '/BM.futurestar.cc' },
|
||||
{ title: '健康产业', path: '/HI.futurestar.cc' },
|
||||
{ title: '基础设施', path: '/BI.futurestar.cc' },
|
||||
{ title: '未来农业', path: '/FA.futurestar.cc' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '新闻资讯',
|
||||
children: [
|
||||
{ title: '公告通知', path: '/newsTrend' },
|
||||
{ title: '公司资讯', path: '/companyInformation' },
|
||||
{ title: '政策法规', path: '/policyRegulations' },
|
||||
{ title: '行业动态', path: '/industryDynamics' },
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -114,12 +123,13 @@ export default {
|
|||
title: '人才招募',
|
||||
children: [
|
||||
{ title: '人才战略', path: '/' },
|
||||
{ title: '招募信息', path: '/' },
|
||||
{ title: '招募信息', path: '/recruit/socialRecruit' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '联系我们',
|
||||
path: '/',
|
||||
hash: 'myfooter',
|
||||
}, {
|
||||
title: '登录',
|
||||
path: '/',
|
||||
|
|
@ -190,7 +200,8 @@ export default {
|
|||
position: relative;
|
||||
}
|
||||
.nav-menu:not(:last-of-type) {
|
||||
margin-right: 100rem;
|
||||
/* margin-right: 100rem; */
|
||||
margin-right: 70rem;
|
||||
}
|
||||
.nav-menu:hover::after {
|
||||
content: '';
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import axios from 'axios';
|
|||
|
||||
// 创建 axios 实例
|
||||
const request = axios.create({
|
||||
baseURL: process.env.VUE_APP_API_BASE_URL,
|
||||
// baseURL: process.env.VUE_APP_API_TARGET_URL,
|
||||
// baseURL: process.env.VUE_APP_API_BASE_URL,
|
||||
baseURL: process.env.VUE_APP_API_TARGET_URL,
|
||||
timeout: 10000,
|
||||
});
|
||||
request.interceptors.request.use(
|
||||
|
|
|
|||
|
|
@ -8,33 +8,58 @@ const RouteView = {
|
|||
};
|
||||
|
||||
const routes = [
|
||||
/* {
|
||||
path: '/',
|
||||
redirect: '/home',
|
||||
}, */
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/fshg.cc/home',
|
||||
},
|
||||
{
|
||||
path: '/fshg.cc/home',
|
||||
component: (resolve) => require(['../views/Home/Index.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/business',
|
||||
path: '/fshg.cc/business',
|
||||
component: RouteView,
|
||||
children: [
|
||||
{
|
||||
path: '/business/capitalServices',
|
||||
path: '/Cs.futurestar.cc',
|
||||
component: (resolve) =>
|
||||
require(['../views/Business/CapitalServices/Index.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/business/highTech',
|
||||
path: '/Tech.futurestar.cc',
|
||||
component: (resolve) =>
|
||||
require(['../views/Business/HighTech/Index.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/business/hnergyEnvironment',
|
||||
path: '/EE.futurestar.cc',
|
||||
component: (resolve) =>
|
||||
require(['../views/Business/EnergyEnvironment/Index.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/GSC.futurestar.cc',
|
||||
component: (resolve) =>
|
||||
require(['../views/Business/GlobalSupplyChain/Index.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/BM.futurestar.cc',
|
||||
component: (resolve) =>
|
||||
require(['../views/Business/Commercial/Index.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/HI.futurestar.cc',
|
||||
component: (resolve) =>
|
||||
require(['../views/Business/HealthIndustry/Index.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/BI.futurestar.cc',
|
||||
component: (resolve) =>
|
||||
require(['../views/Business/Construction/Index.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/FA.futurestar.cc',
|
||||
component: (resolve) =>
|
||||
require(['../views/Business/FutureAgriculture/Index.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/business/index',
|
||||
component: (resolve) =>
|
||||
|
|
@ -45,11 +70,6 @@ const routes = [
|
|||
component: (resolve) =>
|
||||
require(['../views/Business/Petrochemical/Index.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/business/construction',
|
||||
component: (resolve) =>
|
||||
require(['../views/Business/Construction/Index.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/business/ironOre',
|
||||
component: (resolve) =>
|
||||
|
|
@ -77,6 +97,36 @@ const routes = [
|
|||
component: (resolve) =>
|
||||
require(['../views/NewsTrends/NewsDetail.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/companyInformation',
|
||||
component: (resolve) =>
|
||||
require(['../views/CompanyInformation/Index.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/companyInformation/detail/:newsId',
|
||||
component: (resolve) =>
|
||||
require(['../views/CompanyInformation/InformDetail.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/policyRegulations',
|
||||
component: (resolve) =>
|
||||
require(['../views/PolicyRegulations/Index.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/policyRegulations/detail/:newsId',
|
||||
component: (resolve) =>
|
||||
require(['../views/PolicyRegulations/InformDetail.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/industryDynamics',
|
||||
component: (resolve) =>
|
||||
require(['../views/IndustryDynamics/Index.vue'], resolve),
|
||||
},
|
||||
{
|
||||
path: '/IndustryDynamics/detail/:newsId',
|
||||
component: (resolve) =>
|
||||
require(['../views/IndustryDynamics/InformDetail.vue'], resolve),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -84,7 +134,7 @@ const routes = [
|
|||
component: RouteView,
|
||||
children: [
|
||||
{
|
||||
path: '/about/companyIntroduction',
|
||||
path: '/fshg.cc/about',
|
||||
component: (resolve) =>
|
||||
require(['../views/About/CompanyIntroduction/Index.vue'], resolve),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<div class="page-company">
|
||||
<div class="screen1">
|
||||
<div
|
||||
class="screen1"
|
||||
id="screen1"
|
||||
>
|
||||
<!-- <video
|
||||
ref="video"
|
||||
:src="playingVideoSrc"
|
||||
|
|
@ -105,6 +108,7 @@
|
|||
<div
|
||||
v-for="(item, index) in screenList"
|
||||
:key="index"
|
||||
:id="['screen'+ (index + 3)]"
|
||||
:class="['screen' + (index + 3), item.class]"
|
||||
>
|
||||
<div class="wrapper1920">
|
||||
|
|
@ -165,7 +169,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen5">
|
||||
<div
|
||||
class="screen5"
|
||||
id="screen5"
|
||||
>
|
||||
<div class="wrapper1680">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
|
|
@ -242,7 +249,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FootBar theme="dark"></FootBar>
|
||||
<FootBar
|
||||
id="myfooter"
|
||||
theme="dark"
|
||||
></FootBar>
|
||||
<el-dialog
|
||||
:visible.sync="screen1.videoVisible"
|
||||
v-if="screen1.videoVisible"
|
||||
|
|
@ -263,7 +273,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import ArrowHalfRound from '@/components/ArrowHalfRound.vue';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
import ValuesAccordion from './components/ValuesAccordion.vue';
|
||||
|
|
@ -368,6 +378,14 @@ export default {
|
|||
this.screen6.offsetLevel = i6;
|
||||
}
|
||||
},
|
||||
$route () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'dark');
|
||||
|
|
@ -379,7 +397,16 @@ export default {
|
|||
this.getScreen5ListData();
|
||||
this.getScreen6ListData();
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||
async getScreen1Banner () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
|
|
|
|||
|
|
@ -311,20 +311,23 @@
|
|||
{{ screen5.joinUs.contentCn }}
|
||||
</div>
|
||||
<div
|
||||
@click="$router.push('/recruit/socialRecruit')"
|
||||
class="text-posi-abs"
|
||||
style="--l:118rem;--t:433rem;--w:209rem;--h:57rem;--fs:24rem;--lh:57rem;--ff:MicrosoftYaHeiSemiBold;--ta:center;background-color:#ffffff;border-radius:28rem;cursor: pointer;"
|
||||
>
|
||||
<!-- @click="$router.push('/recruit/socialRecruit')" -->
|
||||
<span class="join-btn-text">JOIN US</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FootBar theme="dark"></FootBar>
|
||||
<FootBar
|
||||
id="myfooter"
|
||||
theme="dark"
|
||||
></FootBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
export default {
|
||||
components: { FootBar },
|
||||
|
|
@ -393,6 +396,22 @@ export default {
|
|||
this.screen5.offsetLevel = i5;
|
||||
}
|
||||
},
|
||||
$route () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
|
|
@ -407,6 +426,7 @@ export default {
|
|||
this.getScreen6ListData();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||
async getScreen2Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
|
|
|
|||
511
src/views/Business/Commercial/Index.vue
Normal file
511
src/views/Business/Commercial/Index.vue
Normal file
|
|
@ -0,0 +1,511 @@
|
|||
<template>
|
||||
<div class="page-construction">
|
||||
<div class="screen1">
|
||||
<div style="height:104rem;"></div>
|
||||
</div>
|
||||
<div class="screen2">
|
||||
<div class="wrapper1680">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:53rem;--l:0rem;--c:#ff0000;"
|
||||
>
|
||||
{{ screen2.title }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
>
|
||||
商业管理
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:93rem;--r:8rem;--w:650rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;text-indent: 1.5em;"
|
||||
>
|
||||
{{ screen2.contentCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--t:447rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
>
|
||||
<img
|
||||
:src="screen2.imageSrc"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen3">
|
||||
<div class="wrapper1680">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:115rem;--r:0rem;--w:100%;--fs:42rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;"
|
||||
>
|
||||
{{ screen3.titleCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:197rem;--r:0rem;--w:100%;--fs:20rem;--lh:35rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;--tde:0.3s;"
|
||||
>
|
||||
{{ screen3.contentCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<div class="list-wrapper">
|
||||
<div
|
||||
v-for="(item, index) in screen3.list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<transition name="scale">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-img"
|
||||
:style="`--tde:${0.6 + index * 0.05}s;`"
|
||||
>
|
||||
<img
|
||||
:src="item.imageurl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-title"
|
||||
:style="`--tde:${0.9 + index * 0.05}s;`"
|
||||
>
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-content"
|
||||
:style="`--tde:${1.2 + index * 0.05}s;`"
|
||||
>
|
||||
{{ item.titleChinese }}
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen4">
|
||||
<div class="wrapper1680">
|
||||
<div
|
||||
v-for="(item, index) in screen4.list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
|
||||
<div
|
||||
class="content-wrapper"
|
||||
:style="`--tdu:0.5s;--initial:#f5f5f8;`"
|
||||
>
|
||||
<div class="title">
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
<div class="content">
|
||||
{{ item.titleChinese }}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
|
||||
<div
|
||||
class="image-wrapper"
|
||||
:style="`--tdu:0.5s;--tde:0.5s;--initial:#f5f5f8;`"
|
||||
>
|
||||
<img
|
||||
:src="item.imageurl"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen5">
|
||||
<div class="wrapper1680">
|
||||
<div
|
||||
class="box-posi-abs"
|
||||
style="--t:90rem;--w:100%;--h:1rem;"
|
||||
>
|
||||
<div class="split-line"></div>
|
||||
</div>
|
||||
<div
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--r:1rem;--t:180rem;--w:1680rem;--h:550rem;"
|
||||
>
|
||||
<img
|
||||
:src="screen5.joinUs.imageSrc"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
<transition name="fade-slide-left">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 1"
|
||||
class="text-posi-abs"
|
||||
style="--t:333rem;--l:118rem;--fs:30rem;--c:#ffffff;"
|
||||
>
|
||||
{{ screen5.joinUs.title }}
|
||||
</div>
|
||||
</transition>
|
||||
<div
|
||||
class="text-posi-abs"
|
||||
style="--t:402rem;--l:117rem;--w:536rem;--fs:16rem;--lh:24rem;--c:#ffffff;--ff:MicrosoftYaHeiLight;--ta:justify;"
|
||||
>
|
||||
{{ screen5.joinUs.contentCn }}
|
||||
</div>
|
||||
<div
|
||||
class="text-posi-abs"
|
||||
style="--l:118rem;--t:523rem;--w:209rem;--h:57rem;--fs:24rem;--lh:57rem;--ff:MicrosoftYaHeiSemiBold;--ta:center;background-color:#ffffff;border-radius:28rem;cursor: pointer;"
|
||||
@click="$router.push('/recruit/socialRecruit')"
|
||||
>
|
||||
<span class="join-btn-text">JOIN US</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FootBar
|
||||
id="myfooter"
|
||||
theme="dark"
|
||||
></FootBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
export default {
|
||||
components: { FootBar },
|
||||
data () {
|
||||
return {
|
||||
screen2: {
|
||||
show: false,
|
||||
title: '',
|
||||
contentCn: '',
|
||||
imageSrc: '',
|
||||
},
|
||||
screen3: {
|
||||
offsets: [800],
|
||||
offsetLevel: -1,
|
||||
titleCn: '',
|
||||
contentCn: '',
|
||||
list: [],
|
||||
},
|
||||
screen4: {
|
||||
offsets: [1700, 2000],
|
||||
offsetLevel: -1,
|
||||
list: [],
|
||||
},
|
||||
screen5: {
|
||||
offsets: [2900, 3900],
|
||||
offsetLevel: -1,
|
||||
keyCase: {
|
||||
title: '',
|
||||
contentCn: '',
|
||||
},
|
||||
plateList: [],
|
||||
joinUs: {
|
||||
title: '',
|
||||
contentCn: '',
|
||||
imageSrc: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
scrollTop: state => state.scroll.scrollTop,
|
||||
webScale: state => state.web.scale,
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
scrollTop (val) {
|
||||
const v = val / this.webScale;
|
||||
const i3 = this.screen3.offsetLevel + 1;
|
||||
if (v >= this.screen3.offsets[i3]) {
|
||||
this.screen3.offsetLevel = i3;
|
||||
}
|
||||
const i4 = this.screen4.offsetLevel + 1;
|
||||
if (v >= this.screen4.offsets[i4]) {
|
||||
this.screen4.offsetLevel = i4;
|
||||
}
|
||||
const i5 = this.screen5.offsetLevel + 1;
|
||||
if (v >= this.screen5.offsets[i5]) {
|
||||
this.screen5.offsetLevel = i5;
|
||||
}
|
||||
},
|
||||
$route () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
this.getScreen2Data();
|
||||
this.getScreen3Data();
|
||||
this.getScreen3ListData();
|
||||
this.getScreen4ListData();
|
||||
this.getScreen5JoinusData();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||
async getScreen2Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/商业管理/主要内容' } },
|
||||
);
|
||||
this.screen2.title = res.rows[0].businessName;
|
||||
this.screen2.contentCn = res.rows[0].titleChinese;
|
||||
this.screen2.imageSrc = res.rows[0].imageurl;
|
||||
this.screen2.show = true;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen3Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/商业管理/项目描述' } },
|
||||
);
|
||||
this.screen3.titleCn = res.rows[0].businessName;
|
||||
this.screen3.contentCn = res.rows[0].titleChinese;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen3ListData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 6, captionName: '业务领域/商业管理/项目案例' } },
|
||||
);
|
||||
this.screen3.list = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen4ListData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 4, captionName: '业务领域/商业管理/技术支持' } },
|
||||
);
|
||||
this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen5JoinusData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/商业管理/joinus' } },
|
||||
);
|
||||
this.screen5.joinUs.title = res.rows[0].businessName;
|
||||
this.screen5.joinUs.contentCn = res.rows[0].titleChinese;
|
||||
this.screen5.joinUs.imageSrc = res.rows[0].imageurl;
|
||||
} catch (error) {}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-construction {
|
||||
width: 100%;
|
||||
}
|
||||
.screen1 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 {
|
||||
position: relative;
|
||||
height: 1186rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 .wrapper1680 {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
border-bottom: 1rem solid;
|
||||
border-image: radial-gradient(circle, rgba(193, 200, 221, 1), rgba(191, 199, 222, 1), rgba(195, 203, 223, 1), rgba(175, 185, 208, 1)) 1 1;
|
||||
}
|
||||
.screen3 {
|
||||
position: relative;
|
||||
height: 1300rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen3 .wrapper1680 {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.screen3 .list-wrapper {
|
||||
position: absolute;
|
||||
top: 400rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0px 140rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.screen3 .list-item {
|
||||
margin: 0 58rem;
|
||||
width: 350rem;
|
||||
height: 350rem;
|
||||
margin-bottom: 90rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.screen3 .list-item:hover {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen3 .list-img {
|
||||
width: 150rem;
|
||||
height: 150rem;
|
||||
margin-bottom: 40rem;
|
||||
}
|
||||
.screen3 .list-title {
|
||||
text-align: center;
|
||||
font-size: 20rem;
|
||||
line-height: 1;
|
||||
color: #111111;
|
||||
margin-bottom: 26rem;
|
||||
}
|
||||
.screen3 .list-content {
|
||||
width: 280rem;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 14rem;
|
||||
line-height: 22rem;
|
||||
color: #333333;
|
||||
}
|
||||
.screen4 {
|
||||
position: relative;
|
||||
height: 2410rem;
|
||||
background-color: #F5F5F8;
|
||||
}
|
||||
.screen4 .wrapper1680 {
|
||||
padding: 124rem 0;
|
||||
}
|
||||
.screen4 .list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n-1) {
|
||||
flex-direction: row;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.screen4 .list-item + .list-item {
|
||||
margin-top: 52rem;
|
||||
}
|
||||
.screen4 .content-wrapper {
|
||||
width: 755rem;
|
||||
}
|
||||
.screen4 .content-wrapper .title {
|
||||
padding: 0 1rem;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 42rem;
|
||||
color: #111111;
|
||||
margin-bottom: 36rem;
|
||||
}
|
||||
.screen4 .content-wrapper .content {
|
||||
padding: 5rem;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 20rem;
|
||||
line-height: 36rem;
|
||||
text-indent: 1.5em;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) .content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) .content-wrapper .content {
|
||||
text-align: left;
|
||||
}
|
||||
.screen4 .image-wrapper {
|
||||
width: 752rem;
|
||||
height: 510rem;
|
||||
border-radius: 20rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.screen4 .image-wrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.screen4 .image-wrapper:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.screen5 {
|
||||
position: relative;
|
||||
height: 823rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen5 .wrapper1680 {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.screen5 .plate-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.screen5 .plate-item {
|
||||
width: 325rem;
|
||||
height: 302rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-radius: 20rem;
|
||||
}
|
||||
.screen5 .plate-item:hover {
|
||||
overflow: hidden;
|
||||
box-shadow: 8rem 8rem 25rem 3rem #5E5E5E11;
|
||||
}
|
||||
.screen5 .plate-item:hover img {
|
||||
transition: transform 0.4s;
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen5 .split-line {
|
||||
border-bottom: 1rem solid;
|
||||
border-image: radial-gradient(circle, rgba(193, 200, 221, 1), rgba(191, 199, 222, 1), rgba(195, 203, 223, 1), rgba(175, 185, 208, 1)) 1 1;
|
||||
}
|
||||
.screen5 .join-btn-text {
|
||||
background-image: linear-gradient(90deg, #FF0300, #FFAA05);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -20,14 +20,14 @@
|
|||
class="text-posi-abs"
|
||||
style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
>
|
||||
基础设施建设
|
||||
基础设施
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:93rem;--r:8rem;--w:650rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;"
|
||||
style="--t:93rem;--r:8rem;--w:650rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;text-indent: 1.5em;"
|
||||
>
|
||||
{{ screen2.contentCn }}
|
||||
</div>
|
||||
|
|
@ -67,13 +67,6 @@
|
|||
{{ screen3.contentCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="box-posi-abs"
|
||||
style="--tde:0.5s;--l: 50%; --t: 342rem;--w: 66rem; --h: 4rem; background-color: #D70D18;transform: translateX(-50%);"
|
||||
></div>
|
||||
</transition>
|
||||
<div class="list-wrapper">
|
||||
<div
|
||||
v-for="(item, index) in screen3.list"
|
||||
|
|
@ -123,7 +116,6 @@
|
|||
>
|
||||
<transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
|
||||
<div
|
||||
v-show="screen4.offsetLevel >= index"
|
||||
class="content-wrapper"
|
||||
:style="`--tdu:0.5s;--initial:#f5f5f8;`"
|
||||
>
|
||||
|
|
@ -133,17 +125,10 @@
|
|||
<div class="content">
|
||||
{{ item.titleChinese }}
|
||||
</div>
|
||||
<transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
|
||||
<div
|
||||
v-show="screen4.offsetLevel >= index"
|
||||
style="--tdu:0.5s;--tde:0.3s;width:66rem;height:4rem;background-color:#D70D18;margin:40rem 5rem 0;"
|
||||
></div>
|
||||
</transition>
|
||||
</div>
|
||||
</transition>
|
||||
<transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
|
||||
<div
|
||||
v-show="screen4.offsetLevel >= index"
|
||||
class="image-wrapper"
|
||||
:style="`--tdu:0.5s;--tde:0.5s;--initial:#f5f5f8;`"
|
||||
>
|
||||
|
|
@ -159,86 +144,15 @@
|
|||
</div>
|
||||
<div class="screen5">
|
||||
<div class="wrapper1680">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:120rem;--l:0rem;--w:100%;--fs:24rem;--c:#111111;--ta:center;"
|
||||
>
|
||||
项目案例
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:174rem;--l:0rem;--w:100%;--fs:42rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ta:center;--tde:0.3s;"
|
||||
>
|
||||
{{ screen5.keyCase.title }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:255rem;--l:0rem;--w:100%;--fs:20rem;--lh:34rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ta:center;--ws:pre-line;--tde:0.6s;"
|
||||
>
|
||||
{{ screen5.keyCase.contentCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 0"
|
||||
class="box-posi-abs"
|
||||
style="--tde:0.5s;--l: 50%; --t: 397rem;--w: 66rem; --h: 4rem; background-color: #D70D18;transform: translateX(-50%);"
|
||||
></div>
|
||||
</transition>
|
||||
<div
|
||||
class="box-posi-abs plate-wrapper"
|
||||
style="--l:0;--r:0;--t:545rem;--w:100%;--h:550rem;"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in screen5.plateList"
|
||||
:key="item.id"
|
||||
class="plate-item"
|
||||
>
|
||||
<transition name="fade-slide-bottom">
|
||||
<img
|
||||
v-show="screen5.offsetLevel >= 0"
|
||||
:src="item.imageurl"
|
||||
alt=""
|
||||
:style="`width:100%;height:100%;--tde:${0.9+0.1*index}s;`"
|
||||
/>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
:style="`--t:121rem;--l:0;--w:100%;--h:auto;--fs:30rem;--c:#ffffff;--ta:center;--tde:${0.9+0.1*index}s;`"
|
||||
>
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
:style="`--t:166rem;--l:0;--w:100%;--h:auto;--fs:18rem;--c:#ffffff;--ff:MicrosoftYaHeiLight;--ta:center;--tde:${0.9+0.1*index}s;`"
|
||||
>
|
||||
{{ item.businessNameEnglish }}
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box-posi-abs"
|
||||
style="--t:971rem;--w:100%;--h:1rem;"
|
||||
style="--t:90rem;--w:100%;--h:1rem;"
|
||||
>
|
||||
<div class="split-line"></div>
|
||||
</div>
|
||||
<div
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--r:1rem;--t:1091rem;--w:1680rem;--h:550rem;"
|
||||
style="--l:1rem;--r:1rem;--t:180rem;--w:1680rem;--h:550rem;"
|
||||
>
|
||||
<img
|
||||
:src="screen5.joinUs.imageSrc"
|
||||
|
|
@ -250,32 +164,35 @@
|
|||
<div
|
||||
v-show="screen5.offsetLevel >= 1"
|
||||
class="text-posi-abs"
|
||||
style="--t:1243rem;--l:118rem;--fs:30rem;--c:#ffffff;"
|
||||
style="--t:333rem;--l:118rem;--fs:30rem;--c:#ffffff;"
|
||||
>
|
||||
{{ screen5.joinUs.title }}
|
||||
</div>
|
||||
</transition>
|
||||
<div
|
||||
class="text-posi-abs"
|
||||
style="--t:1312rem;--l:117rem;--w:536rem;--fs:16rem;--lh:24rem;--c:#ffffff;--ff:MicrosoftYaHeiLight;--ta:justify;"
|
||||
style="--t:402rem;--l:117rem;--w:536rem;--fs:16rem;--lh:24rem;--c:#ffffff;--ff:MicrosoftYaHeiLight;--ta:justify;"
|
||||
>
|
||||
{{ screen5.joinUs.contentCn }}
|
||||
</div>
|
||||
<div
|
||||
class="text-posi-abs"
|
||||
style="--l:118rem;--t:1433rem;--w:209rem;--h:57rem;--fs:24rem;--lh:57rem;--ff:MicrosoftYaHeiSemiBold;--ta:center;background-color:#ffffff;border-radius:28rem;cursor: pointer;"
|
||||
style="--l:118rem;--t:523rem;--w:209rem;--h:57rem;--fs:24rem;--lh:57rem;--ff:MicrosoftYaHeiSemiBold;--ta:center;background-color:#ffffff;border-radius:28rem;cursor: pointer;"
|
||||
@click="$router.push('/recruit/socialRecruit')"
|
||||
>
|
||||
<span class="join-btn-text">JOIN US</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FootBar theme="dark"></FootBar>
|
||||
<FootBar
|
||||
id="myfooter"
|
||||
theme="dark"
|
||||
></FootBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
export default {
|
||||
components: { FootBar },
|
||||
|
|
@ -337,6 +254,22 @@ export default {
|
|||
this.screen5.offsetLevel = i5;
|
||||
}
|
||||
},
|
||||
$route () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
|
|
@ -344,16 +277,15 @@ export default {
|
|||
this.getScreen3Data();
|
||||
this.getScreen3ListData();
|
||||
this.getScreen4ListData();
|
||||
this.getScreen5KeyCaseData();
|
||||
this.getScreen5PlateListData();
|
||||
this.getScreen5JoinusData();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||
async getScreen2Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务范围/基建业务/主要内容' } },
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/基础设施/主要内容' } },
|
||||
);
|
||||
this.screen2.title = res.rows[0].businessName;
|
||||
this.screen2.contentCn = res.rows[0].titleChinese;
|
||||
|
|
@ -365,7 +297,7 @@ export default {
|
|||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务范围/基建业务/项目描述' } },
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/基础设施/项目描述' } },
|
||||
);
|
||||
this.screen3.titleCn = res.rows[0].businessName;
|
||||
this.screen3.contentCn = res.rows[0].titleChinese;
|
||||
|
|
@ -375,7 +307,7 @@ export default {
|
|||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 3, captionName: '业务范围/基建业务/项目案例' } },
|
||||
{ params: { pageNum: 1, pageSize: 6, captionName: '业务领域/基础设施/项目案例' } },
|
||||
);
|
||||
this.screen3.list = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
} catch (error) {}
|
||||
|
|
@ -384,35 +316,16 @@ export default {
|
|||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 2, captionName: '业务范围/基建业务/技术支持' } },
|
||||
{ params: { pageNum: 1, pageSize: 4, captionName: '业务领域/基础设施/技术支持' } },
|
||||
);
|
||||
this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen5KeyCaseData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务范围/基建业务/重点案例' } },
|
||||
);
|
||||
this.screen5.keyCase.title = res.rows[0].businessName;
|
||||
this.screen5.keyCase.contentCn = res.rows[0].titleChinese;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen5PlateListData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 4, captionName: '业务范围/基建业务/重点案例主题' } },
|
||||
);
|
||||
this.screen5.plateList = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen5JoinusData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务范围/基建业务/joinus' } },
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/基础设施/joinus' } },
|
||||
);
|
||||
this.screen5.joinUs.title = res.rows[0].businessName;
|
||||
this.screen5.joinUs.contentCn = res.rows[0].titleChinese;
|
||||
|
|
@ -446,7 +359,7 @@ export default {
|
|||
}
|
||||
.screen3 {
|
||||
position: relative;
|
||||
height: 871rem;
|
||||
height: 1300rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen3 .wrapper1680 {
|
||||
|
|
@ -455,19 +368,22 @@ export default {
|
|||
}
|
||||
.screen3 .list-wrapper {
|
||||
position: absolute;
|
||||
top: 443rem;
|
||||
top: 400rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0px 140rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.screen3 .list-item {
|
||||
width: 0;
|
||||
flex: 1;
|
||||
margin: 0 58rem;
|
||||
width: 350rem;
|
||||
height: 350rem;
|
||||
margin-bottom: 90rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transform: scale(1, 1);
|
||||
transition: transform 0.3s;
|
||||
transform-origin: center center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.screen3 .list-item:hover {
|
||||
|
|
@ -488,7 +404,7 @@ export default {
|
|||
.screen3 .list-content {
|
||||
width: 280rem;
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 14rem;
|
||||
line-height: 22rem;
|
||||
|
|
@ -496,7 +412,7 @@ export default {
|
|||
}
|
||||
.screen4 {
|
||||
position: relative;
|
||||
height: 1320rem;
|
||||
height: 2410rem;
|
||||
background-color: #F5F5F8;
|
||||
}
|
||||
.screen4 .wrapper1680 {
|
||||
|
|
@ -531,11 +447,12 @@ export default {
|
|||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 20rem;
|
||||
line-height: 36rem;
|
||||
text-indent: 1.5em;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) .content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) .content-wrapper .content {
|
||||
text-align: left;
|
||||
|
|
@ -556,7 +473,7 @@ export default {
|
|||
}
|
||||
.screen5 {
|
||||
position: relative;
|
||||
height: 1833rem;
|
||||
height: 823rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen5 .wrapper1680 {
|
||||
|
|
|
|||
|
|
@ -178,18 +178,21 @@
|
|||
<div
|
||||
class="text-posi-abs"
|
||||
style="--l:118rem;--t:523rem;--w:209rem;--h:57rem;--fs:24rem;--lh:57rem;--ff:MicrosoftYaHeiSemiBold;--ta:center;background-color:#ffffff;border-radius:28rem;cursor: pointer;"
|
||||
@click="$router.push('/recruit/socialRecruit')"
|
||||
>
|
||||
<!-- @click="$router.push('/recruit/socialRecruit')" -->
|
||||
<span class="join-btn-text">JOIN US</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FootBar theme="dark"></FootBar>
|
||||
<FootBar
|
||||
id="myfooter"
|
||||
theme="dark"
|
||||
></FootBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
export default {
|
||||
components: { FootBar },
|
||||
|
|
@ -251,6 +254,22 @@ export default {
|
|||
this.screen5.offsetLevel = i5;
|
||||
}
|
||||
},
|
||||
$route () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
|
|
@ -261,6 +280,7 @@ export default {
|
|||
this.getScreen5JoinusData();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||
async getScreen2Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
|
|
|
|||
511
src/views/Business/FutureAgriculture/Index.vue
Normal file
511
src/views/Business/FutureAgriculture/Index.vue
Normal file
|
|
@ -0,0 +1,511 @@
|
|||
<template>
|
||||
<div class="page-construction">
|
||||
<div class="screen1">
|
||||
<div style="height:104rem;"></div>
|
||||
</div>
|
||||
<div class="screen2">
|
||||
<div class="wrapper1680">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:53rem;--l:0rem;--c:#ff0000;"
|
||||
>
|
||||
{{ screen2.title }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
>
|
||||
未来农业
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:93rem;--r:8rem;--w:650rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;text-indent: 1.5em;"
|
||||
>
|
||||
{{ screen2.contentCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--t:447rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
>
|
||||
<img
|
||||
:src="screen2.imageSrc"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen3">
|
||||
<div class="wrapper1680">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:115rem;--r:0rem;--w:100%;--fs:42rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;"
|
||||
>
|
||||
{{ screen3.titleCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:197rem;--r:0rem;--w:100%;--fs:20rem;--lh:35rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;--tde:0.3s;"
|
||||
>
|
||||
{{ screen3.contentCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<div class="list-wrapper">
|
||||
<div
|
||||
v-for="(item, index) in screen3.list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<transition name="scale">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-img"
|
||||
:style="`--tde:${0.6 + index * 0.05}s;`"
|
||||
>
|
||||
<img
|
||||
:src="item.imageurl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-title"
|
||||
:style="`--tde:${0.9 + index * 0.05}s;`"
|
||||
>
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-content"
|
||||
:style="`--tde:${1.2 + index * 0.05}s;`"
|
||||
>
|
||||
{{ item.titleChinese }}
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen4">
|
||||
<div class="wrapper1680">
|
||||
<div
|
||||
v-for="(item, index) in screen4.list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
|
||||
<div
|
||||
class="content-wrapper"
|
||||
:style="`--tdu:0.5s;--initial:#f5f5f8;`"
|
||||
>
|
||||
<div class="title">
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
<div class="content">
|
||||
{{ item.titleChinese }}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
|
||||
<div
|
||||
class="image-wrapper"
|
||||
:style="`--tdu:0.5s;--tde:0.5s;--initial:#f5f5f8;`"
|
||||
>
|
||||
<img
|
||||
:src="item.imageurl"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen5">
|
||||
<div class="wrapper1680">
|
||||
<div
|
||||
class="box-posi-abs"
|
||||
style="--t:90rem;--w:100%;--h:1rem;"
|
||||
>
|
||||
<div class="split-line"></div>
|
||||
</div>
|
||||
<div
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--r:1rem;--t:180rem;--w:1680rem;--h:550rem;"
|
||||
>
|
||||
<img
|
||||
:src="screen5.joinUs.imageSrc"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
<transition name="fade-slide-left">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 1"
|
||||
class="text-posi-abs"
|
||||
style="--t:333rem;--l:118rem;--fs:30rem;--c:#ffffff;"
|
||||
>
|
||||
{{ screen5.joinUs.title }}
|
||||
</div>
|
||||
</transition>
|
||||
<div
|
||||
class="text-posi-abs"
|
||||
style="--t:402rem;--l:117rem;--w:536rem;--fs:16rem;--lh:24rem;--c:#ffffff;--ff:MicrosoftYaHeiLight;--ta:justify;"
|
||||
>
|
||||
{{ screen5.joinUs.contentCn }}
|
||||
</div>
|
||||
<div
|
||||
class="text-posi-abs"
|
||||
style="--l:118rem;--t:523rem;--w:209rem;--h:57rem;--fs:24rem;--lh:57rem;--ff:MicrosoftYaHeiSemiBold;--ta:center;background-color:#ffffff;border-radius:28rem;cursor: pointer;"
|
||||
@click="$router.push('/recruit/socialRecruit')"
|
||||
>
|
||||
<span class="join-btn-text">JOIN US</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FootBar
|
||||
id="myfooter"
|
||||
theme="dark"
|
||||
></FootBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
export default {
|
||||
components: { FootBar },
|
||||
data () {
|
||||
return {
|
||||
screen2: {
|
||||
show: false,
|
||||
title: '',
|
||||
contentCn: '',
|
||||
imageSrc: '',
|
||||
},
|
||||
screen3: {
|
||||
offsets: [800],
|
||||
offsetLevel: -1,
|
||||
titleCn: '',
|
||||
contentCn: '',
|
||||
list: [],
|
||||
},
|
||||
screen4: {
|
||||
offsets: [1700, 2000],
|
||||
offsetLevel: -1,
|
||||
list: [],
|
||||
},
|
||||
screen5: {
|
||||
offsets: [2900, 3900],
|
||||
offsetLevel: -1,
|
||||
keyCase: {
|
||||
title: '',
|
||||
contentCn: '',
|
||||
},
|
||||
plateList: [],
|
||||
joinUs: {
|
||||
title: '',
|
||||
contentCn: '',
|
||||
imageSrc: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
scrollTop: state => state.scroll.scrollTop,
|
||||
webScale: state => state.web.scale,
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
scrollTop (val) {
|
||||
const v = val / this.webScale;
|
||||
const i3 = this.screen3.offsetLevel + 1;
|
||||
if (v >= this.screen3.offsets[i3]) {
|
||||
this.screen3.offsetLevel = i3;
|
||||
}
|
||||
const i4 = this.screen4.offsetLevel + 1;
|
||||
if (v >= this.screen4.offsets[i4]) {
|
||||
this.screen4.offsetLevel = i4;
|
||||
}
|
||||
const i5 = this.screen5.offsetLevel + 1;
|
||||
if (v >= this.screen5.offsets[i5]) {
|
||||
this.screen5.offsetLevel = i5;
|
||||
}
|
||||
},
|
||||
$route () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
this.getScreen2Data();
|
||||
this.getScreen3Data();
|
||||
this.getScreen3ListData();
|
||||
this.getScreen4ListData();
|
||||
this.getScreen5JoinusData();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||
async getScreen2Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/未来农业/主要内容' } },
|
||||
);
|
||||
this.screen2.title = res.rows[0].businessName;
|
||||
this.screen2.contentCn = res.rows[0].titleChinese;
|
||||
this.screen2.imageSrc = res.rows[0].imageurl;
|
||||
this.screen2.show = true;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen3Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/未来农业/项目描述' } },
|
||||
);
|
||||
this.screen3.titleCn = res.rows[0].businessName;
|
||||
this.screen3.contentCn = res.rows[0].titleChinese;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen3ListData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 6, captionName: '业务领域/未来农业/项目案例' } },
|
||||
);
|
||||
this.screen3.list = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen4ListData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 4, captionName: '业务领域/未来农业/技术支持' } },
|
||||
);
|
||||
this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen5JoinusData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/未来农业/joinus' } },
|
||||
);
|
||||
this.screen5.joinUs.title = res.rows[0].businessName;
|
||||
this.screen5.joinUs.contentCn = res.rows[0].titleChinese;
|
||||
this.screen5.joinUs.imageSrc = res.rows[0].imageurl;
|
||||
} catch (error) {}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-construction {
|
||||
width: 100%;
|
||||
}
|
||||
.screen1 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 {
|
||||
position: relative;
|
||||
height: 1186rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 .wrapper1680 {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
border-bottom: 1rem solid;
|
||||
border-image: radial-gradient(circle, rgba(193, 200, 221, 1), rgba(191, 199, 222, 1), rgba(195, 203, 223, 1), rgba(175, 185, 208, 1)) 1 1;
|
||||
}
|
||||
.screen3 {
|
||||
position: relative;
|
||||
height: 1300rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen3 .wrapper1680 {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.screen3 .list-wrapper {
|
||||
position: absolute;
|
||||
top: 400rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0px 140rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.screen3 .list-item {
|
||||
margin: 0 58rem;
|
||||
width: 350rem;
|
||||
height: 350rem;
|
||||
margin-bottom: 90rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.screen3 .list-item:hover {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen3 .list-img {
|
||||
width: 150rem;
|
||||
height: 150rem;
|
||||
margin-bottom: 40rem;
|
||||
}
|
||||
.screen3 .list-title {
|
||||
text-align: center;
|
||||
font-size: 20rem;
|
||||
line-height: 1;
|
||||
color: #111111;
|
||||
margin-bottom: 26rem;
|
||||
}
|
||||
.screen3 .list-content {
|
||||
width: 280rem;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 14rem;
|
||||
line-height: 22rem;
|
||||
color: #333333;
|
||||
}
|
||||
.screen4 {
|
||||
position: relative;
|
||||
height: 2410rem;
|
||||
background-color: #F5F5F8;
|
||||
}
|
||||
.screen4 .wrapper1680 {
|
||||
padding: 124rem 0;
|
||||
}
|
||||
.screen4 .list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n-1) {
|
||||
flex-direction: row;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.screen4 .list-item + .list-item {
|
||||
margin-top: 52rem;
|
||||
}
|
||||
.screen4 .content-wrapper {
|
||||
width: 755rem;
|
||||
}
|
||||
.screen4 .content-wrapper .title {
|
||||
padding: 0 1rem;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 42rem;
|
||||
color: #111111;
|
||||
margin-bottom: 36rem;
|
||||
}
|
||||
.screen4 .content-wrapper .content {
|
||||
padding: 5rem;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 20rem;
|
||||
line-height: 36rem;
|
||||
text-indent: 1.5em;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) .content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) .content-wrapper .content {
|
||||
text-align: left;
|
||||
}
|
||||
.screen4 .image-wrapper {
|
||||
width: 752rem;
|
||||
height: 510rem;
|
||||
border-radius: 20rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.screen4 .image-wrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.screen4 .image-wrapper:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.screen5 {
|
||||
position: relative;
|
||||
height: 823rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen5 .wrapper1680 {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.screen5 .plate-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.screen5 .plate-item {
|
||||
width: 325rem;
|
||||
height: 302rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-radius: 20rem;
|
||||
}
|
||||
.screen5 .plate-item:hover {
|
||||
overflow: hidden;
|
||||
box-shadow: 8rem 8rem 25rem 3rem #5E5E5E11;
|
||||
}
|
||||
.screen5 .plate-item:hover img {
|
||||
transition: transform 0.4s;
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen5 .split-line {
|
||||
border-bottom: 1rem solid;
|
||||
border-image: radial-gradient(circle, rgba(193, 200, 221, 1), rgba(191, 199, 222, 1), rgba(195, 203, 223, 1), rgba(175, 185, 208, 1)) 1 1;
|
||||
}
|
||||
.screen5 .join-btn-text {
|
||||
background-image: linear-gradient(90deg, #FF0300, #FFAA05);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
511
src/views/Business/GlobalSupplyChain/Index.vue
Normal file
511
src/views/Business/GlobalSupplyChain/Index.vue
Normal file
|
|
@ -0,0 +1,511 @@
|
|||
<template>
|
||||
<div class="page-construction">
|
||||
<div class="screen1">
|
||||
<div style="height:104rem;"></div>
|
||||
</div>
|
||||
<div class="screen2">
|
||||
<div class="wrapper1680">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:53rem;--l:0rem;--c:#ff0000;"
|
||||
>
|
||||
{{ screen2.title }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
>
|
||||
全球供应链
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:93rem;--r:8rem;--w:650rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;text-indent: 1.5em;"
|
||||
>
|
||||
{{ screen2.contentCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--t:447rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
>
|
||||
<img
|
||||
:src="screen2.imageSrc"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen3">
|
||||
<div class="wrapper1680">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:115rem;--r:0rem;--w:100%;--fs:42rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;"
|
||||
>
|
||||
{{ screen3.titleCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:197rem;--r:0rem;--w:100%;--fs:20rem;--lh:35rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;--tde:0.3s;"
|
||||
>
|
||||
{{ screen3.contentCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<div class="list-wrapper">
|
||||
<div
|
||||
v-for="(item, index) in screen3.list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<transition name="scale">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-img"
|
||||
:style="`--tde:${0.6 + index * 0.05}s;`"
|
||||
>
|
||||
<img
|
||||
:src="item.imageurl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-title"
|
||||
:style="`--tde:${0.9 + index * 0.05}s;`"
|
||||
>
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-content"
|
||||
:style="`--tde:${1.2 + index * 0.05}s;`"
|
||||
>
|
||||
{{ item.titleChinese }}
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen4">
|
||||
<div class="wrapper1680">
|
||||
<div
|
||||
v-for="(item, index) in screen4.list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
|
||||
<div
|
||||
class="content-wrapper"
|
||||
:style="`--tdu:0.5s;--initial:#f5f5f8;`"
|
||||
>
|
||||
<div class="title">
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
<div class="content">
|
||||
{{ item.titleChinese }}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
|
||||
<div
|
||||
class="image-wrapper"
|
||||
:style="`--tdu:0.5s;--tde:0.5s;--initial:#f5f5f8;`"
|
||||
>
|
||||
<img
|
||||
:src="item.imageurl"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen5">
|
||||
<div class="wrapper1680">
|
||||
<div
|
||||
class="box-posi-abs"
|
||||
style="--t:90rem;--w:100%;--h:1rem;"
|
||||
>
|
||||
<div class="split-line"></div>
|
||||
</div>
|
||||
<div
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--r:1rem;--t:180rem;--w:1680rem;--h:550rem;"
|
||||
>
|
||||
<img
|
||||
:src="screen5.joinUs.imageSrc"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
<transition name="fade-slide-left">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 1"
|
||||
class="text-posi-abs"
|
||||
style="--t:333rem;--l:118rem;--fs:30rem;--c:#ffffff;"
|
||||
>
|
||||
{{ screen5.joinUs.title }}
|
||||
</div>
|
||||
</transition>
|
||||
<div
|
||||
class="text-posi-abs"
|
||||
style="--t:402rem;--l:117rem;--w:536rem;--fs:16rem;--lh:24rem;--c:#ffffff;--ff:MicrosoftYaHeiLight;--ta:justify;"
|
||||
>
|
||||
{{ screen5.joinUs.contentCn }}
|
||||
</div>
|
||||
<div
|
||||
class="text-posi-abs"
|
||||
style="--l:118rem;--t:523rem;--w:209rem;--h:57rem;--fs:24rem;--lh:57rem;--ff:MicrosoftYaHeiSemiBold;--ta:center;background-color:#ffffff;border-radius:28rem;cursor: pointer;"
|
||||
@click="$router.push('/recruit/socialRecruit')"
|
||||
>
|
||||
<span class="join-btn-text">JOIN US</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FootBar
|
||||
id="myfooter"
|
||||
theme="dark"
|
||||
></FootBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
export default {
|
||||
components: { FootBar },
|
||||
data () {
|
||||
return {
|
||||
screen2: {
|
||||
show: false,
|
||||
title: '',
|
||||
contentCn: '',
|
||||
imageSrc: '',
|
||||
},
|
||||
screen3: {
|
||||
offsets: [800],
|
||||
offsetLevel: -1,
|
||||
titleCn: '',
|
||||
contentCn: '',
|
||||
list: [],
|
||||
},
|
||||
screen4: {
|
||||
offsets: [1700, 2000],
|
||||
offsetLevel: -1,
|
||||
list: [],
|
||||
},
|
||||
screen5: {
|
||||
offsets: [2900, 3900],
|
||||
offsetLevel: -1,
|
||||
keyCase: {
|
||||
title: '',
|
||||
contentCn: '',
|
||||
},
|
||||
plateList: [],
|
||||
joinUs: {
|
||||
title: '',
|
||||
contentCn: '',
|
||||
imageSrc: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
scrollTop: state => state.scroll.scrollTop,
|
||||
webScale: state => state.web.scale,
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
scrollTop (val) {
|
||||
const v = val / this.webScale;
|
||||
const i3 = this.screen3.offsetLevel + 1;
|
||||
if (v >= this.screen3.offsets[i3]) {
|
||||
this.screen3.offsetLevel = i3;
|
||||
}
|
||||
const i4 = this.screen4.offsetLevel + 1;
|
||||
if (v >= this.screen4.offsets[i4]) {
|
||||
this.screen4.offsetLevel = i4;
|
||||
}
|
||||
const i5 = this.screen5.offsetLevel + 1;
|
||||
if (v >= this.screen5.offsets[i5]) {
|
||||
this.screen5.offsetLevel = i5;
|
||||
}
|
||||
},
|
||||
$route () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
this.getScreen2Data();
|
||||
this.getScreen3Data();
|
||||
this.getScreen3ListData();
|
||||
this.getScreen4ListData();
|
||||
this.getScreen5JoinusData();
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||
async getScreen2Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/全球供应链/主要内容' } },
|
||||
);
|
||||
this.screen2.title = res.rows[0].businessName;
|
||||
this.screen2.contentCn = res.rows[0].titleChinese;
|
||||
this.screen2.imageSrc = res.rows[0].imageurl;
|
||||
this.screen2.show = true;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen3Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/全球供应链/项目描述' } },
|
||||
);
|
||||
this.screen3.titleCn = res.rows[0].businessName;
|
||||
this.screen3.contentCn = res.rows[0].titleChinese;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen3ListData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 6, captionName: '业务领域/全球供应链/项目案例' } },
|
||||
);
|
||||
this.screen3.list = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen4ListData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 4, captionName: '业务领域/全球供应链/技术支持' } },
|
||||
);
|
||||
this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen5JoinusData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/全球供应链/joinus' } },
|
||||
);
|
||||
this.screen5.joinUs.title = res.rows[0].businessName;
|
||||
this.screen5.joinUs.contentCn = res.rows[0].titleChinese;
|
||||
this.screen5.joinUs.imageSrc = res.rows[0].imageurl;
|
||||
} catch (error) {}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-construction {
|
||||
width: 100%;
|
||||
}
|
||||
.screen1 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 {
|
||||
position: relative;
|
||||
height: 1186rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 .wrapper1680 {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
border-bottom: 1rem solid;
|
||||
border-image: radial-gradient(circle, rgba(193, 200, 221, 1), rgba(191, 199, 222, 1), rgba(195, 203, 223, 1), rgba(175, 185, 208, 1)) 1 1;
|
||||
}
|
||||
.screen3 {
|
||||
position: relative;
|
||||
height: 1300rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen3 .wrapper1680 {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.screen3 .list-wrapper {
|
||||
position: absolute;
|
||||
top: 400rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0px 140rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.screen3 .list-item {
|
||||
margin: 0 58rem;
|
||||
width: 350rem;
|
||||
height: 350rem;
|
||||
margin-bottom: 90rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.screen3 .list-item:hover {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen3 .list-img {
|
||||
width: 150rem;
|
||||
height: 150rem;
|
||||
margin-bottom: 40rem;
|
||||
}
|
||||
.screen3 .list-title {
|
||||
text-align: center;
|
||||
font-size: 20rem;
|
||||
line-height: 1;
|
||||
color: #111111;
|
||||
margin-bottom: 26rem;
|
||||
}
|
||||
.screen3 .list-content {
|
||||
width: 280rem;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 14rem;
|
||||
line-height: 22rem;
|
||||
color: #333333;
|
||||
}
|
||||
.screen4 {
|
||||
position: relative;
|
||||
height: 2410rem;
|
||||
background-color: #F5F5F8;
|
||||
}
|
||||
.screen4 .wrapper1680 {
|
||||
padding: 124rem 0;
|
||||
}
|
||||
.screen4 .list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n-1) {
|
||||
flex-direction: row;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.screen4 .list-item + .list-item {
|
||||
margin-top: 52rem;
|
||||
}
|
||||
.screen4 .content-wrapper {
|
||||
width: 755rem;
|
||||
}
|
||||
.screen4 .content-wrapper .title {
|
||||
padding: 0 1rem;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 42rem;
|
||||
color: #111111;
|
||||
margin-bottom: 36rem;
|
||||
}
|
||||
.screen4 .content-wrapper .content {
|
||||
padding: 5rem;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 20rem;
|
||||
line-height: 36rem;
|
||||
text-indent: 1.5em;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) .content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) .content-wrapper .content {
|
||||
text-align: left;
|
||||
}
|
||||
.screen4 .image-wrapper {
|
||||
width: 752rem;
|
||||
height: 510rem;
|
||||
border-radius: 20rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.screen4 .image-wrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.screen4 .image-wrapper:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.screen5 {
|
||||
position: relative;
|
||||
height: 823rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen5 .wrapper1680 {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.screen5 .plate-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.screen5 .plate-item {
|
||||
width: 325rem;
|
||||
height: 302rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-radius: 20rem;
|
||||
}
|
||||
.screen5 .plate-item:hover {
|
||||
overflow: hidden;
|
||||
box-shadow: 8rem 8rem 25rem 3rem #5E5E5E11;
|
||||
}
|
||||
.screen5 .plate-item:hover img {
|
||||
transition: transform 0.4s;
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen5 .split-line {
|
||||
border-bottom: 1rem solid;
|
||||
border-image: radial-gradient(circle, rgba(193, 200, 221, 1), rgba(191, 199, 222, 1), rgba(195, 203, 223, 1), rgba(175, 185, 208, 1)) 1 1;
|
||||
}
|
||||
.screen5 .join-btn-text {
|
||||
background-image: linear-gradient(90deg, #FF0300, #FFAA05);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
511
src/views/Business/HealthIndustry/Index.vue
Normal file
511
src/views/Business/HealthIndustry/Index.vue
Normal file
|
|
@ -0,0 +1,511 @@
|
|||
<template>
|
||||
<div class="page-construction">
|
||||
<div class="screen1">
|
||||
<div style="height:104rem;"></div>
|
||||
</div>
|
||||
<div class="screen2">
|
||||
<div class="wrapper1680">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:53rem;--l:0rem;--c:#ff0000;"
|
||||
>
|
||||
{{ screen2.title }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:99rem;--l:0rem;--fs:72rem;--c:#111111;--ff:MicrosoftYaHeiLight;--tde:0.3s;"
|
||||
>
|
||||
健康产业
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="text-posi-abs"
|
||||
style="--t:93rem;--r:8rem;--w:650rem;--fs:22rem;--lh:30rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:justify;--tde:0.6s;text-indent: 1.5em;"
|
||||
>
|
||||
{{ screen2.contentCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen2.show"
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--t:447rem;--w:1680rem;--h:620rem;--tde:0.9s;"
|
||||
>
|
||||
<img
|
||||
:src="screen2.imageSrc"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen3">
|
||||
<div class="wrapper1680">
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:115rem;--r:0rem;--w:100%;--fs:42rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;"
|
||||
>
|
||||
{{ screen3.titleCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="text-posi-abs"
|
||||
style="--t:197rem;--r:0rem;--w:100%;--fs:20rem;--lh:35rem;--c:#111111;--ff:MicrosoftYaHeiLight;--ws:pre-line;--ta:center;--tde:0.3s;"
|
||||
>
|
||||
{{ screen3.contentCn }}
|
||||
</div>
|
||||
</transition>
|
||||
<div class="list-wrapper">
|
||||
<div
|
||||
v-for="(item, index) in screen3.list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<transition name="scale">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-img"
|
||||
:style="`--tde:${0.6 + index * 0.05}s;`"
|
||||
>
|
||||
<img
|
||||
:src="item.imageurl"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-title"
|
||||
:style="`--tde:${0.9 + index * 0.05}s;`"
|
||||
>
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="fade-slide-bottom">
|
||||
<div
|
||||
v-show="screen3.offsetLevel >= 0"
|
||||
class="list-content"
|
||||
:style="`--tde:${1.2 + index * 0.05}s;`"
|
||||
>
|
||||
{{ item.titleChinese }}
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen4">
|
||||
<div class="wrapper1680">
|
||||
<div
|
||||
v-for="(item, index) in screen4.list"
|
||||
:key="item.id"
|
||||
class="list-item"
|
||||
>
|
||||
<transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
|
||||
<div
|
||||
class="content-wrapper"
|
||||
:style="`--tdu:0.5s;--initial:#f5f5f8;`"
|
||||
>
|
||||
<div class="title">
|
||||
{{ item.businessName }}
|
||||
</div>
|
||||
<div class="content">
|
||||
{{ item.titleChinese }}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition :name="'curtain-' + (index % 2 === 0 ? 'right' : 'left')">
|
||||
<div
|
||||
class="image-wrapper"
|
||||
:style="`--tdu:0.5s;--tde:0.5s;--initial:#f5f5f8;`"
|
||||
>
|
||||
<img
|
||||
:src="item.imageurl"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen5">
|
||||
<div class="wrapper1680">
|
||||
<div
|
||||
class="box-posi-abs"
|
||||
style="--t:90rem;--w:100%;--h:1rem;"
|
||||
>
|
||||
<div class="split-line"></div>
|
||||
</div>
|
||||
<div
|
||||
class="image-posi-abs"
|
||||
style="--l:1rem;--r:1rem;--t:180rem;--w:1680rem;--h:550rem;"
|
||||
>
|
||||
<img
|
||||
:src="screen5.joinUs.imageSrc"
|
||||
alt=""
|
||||
style="width:100%;height:100%;"
|
||||
>
|
||||
</div>
|
||||
<transition name="fade-slide-left">
|
||||
<div
|
||||
v-show="screen5.offsetLevel >= 1"
|
||||
class="text-posi-abs"
|
||||
style="--t:333rem;--l:118rem;--fs:30rem;--c:#ffffff;"
|
||||
>
|
||||
{{ screen5.joinUs.title }}
|
||||
</div>
|
||||
</transition>
|
||||
<div
|
||||
class="text-posi-abs"
|
||||
style="--t:402rem;--l:117rem;--w:536rem;--fs:16rem;--lh:24rem;--c:#ffffff;--ff:MicrosoftYaHeiLight;--ta:justify;"
|
||||
>
|
||||
{{ screen5.joinUs.contentCn }}
|
||||
</div>
|
||||
<div
|
||||
class="text-posi-abs"
|
||||
style="--l:118rem;--t:523rem;--w:209rem;--h:57rem;--fs:24rem;--lh:57rem;--ff:MicrosoftYaHeiSemiBold;--ta:center;background-color:#ffffff;border-radius:28rem;cursor: pointer;"
|
||||
@click="$router.push('/recruit/socialRecruit')"
|
||||
>
|
||||
<span class="join-btn-text">JOIN US</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FootBar
|
||||
id="myfooter"
|
||||
theme="dark"
|
||||
></FootBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
export default {
|
||||
components: { FootBar },
|
||||
data () {
|
||||
return {
|
||||
screen2: {
|
||||
show: false,
|
||||
title: '',
|
||||
contentCn: '',
|
||||
imageSrc: '',
|
||||
},
|
||||
screen3: {
|
||||
offsets: [800],
|
||||
offsetLevel: -1,
|
||||
titleCn: '',
|
||||
contentCn: '',
|
||||
list: [],
|
||||
},
|
||||
screen4: {
|
||||
offsets: [1700, 2000],
|
||||
offsetLevel: -1,
|
||||
list: [],
|
||||
},
|
||||
screen5: {
|
||||
offsets: [2900, 3900],
|
||||
offsetLevel: -1,
|
||||
keyCase: {
|
||||
title: '',
|
||||
contentCn: '',
|
||||
},
|
||||
plateList: [],
|
||||
joinUs: {
|
||||
title: '',
|
||||
contentCn: '',
|
||||
imageSrc: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
scrollTop: state => state.scroll.scrollTop,
|
||||
webScale: state => state.web.scale,
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
scrollTop (val) {
|
||||
const v = val / this.webScale;
|
||||
const i3 = this.screen3.offsetLevel + 1;
|
||||
if (v >= this.screen3.offsets[i3]) {
|
||||
this.screen3.offsetLevel = i3;
|
||||
}
|
||||
const i4 = this.screen4.offsetLevel + 1;
|
||||
if (v >= this.screen4.offsets[i4]) {
|
||||
this.screen4.offsetLevel = i4;
|
||||
}
|
||||
const i5 = this.screen5.offsetLevel + 1;
|
||||
if (v >= this.screen5.offsets[i5]) {
|
||||
this.screen5.offsetLevel = i5;
|
||||
}
|
||||
},
|
||||
$route () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
this.getScreen2Data();
|
||||
this.getScreen3Data();
|
||||
this.getScreen3ListData();
|
||||
this.getScreen4ListData();
|
||||
this.getScreen5JoinusData();
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||
async getScreen2Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/健康产业/主要内容' } },
|
||||
);
|
||||
this.screen2.title = res.rows[0].businessName;
|
||||
this.screen2.contentCn = res.rows[0].titleChinese;
|
||||
this.screen2.imageSrc = res.rows[0].imageurl;
|
||||
this.screen2.show = true;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen3Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/健康产业/项目描述' } },
|
||||
);
|
||||
this.screen3.titleCn = res.rows[0].businessName;
|
||||
this.screen3.contentCn = res.rows[0].titleChinese;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen3ListData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 6, captionName: '业务领域/健康产业/项目案例' } },
|
||||
);
|
||||
this.screen3.list = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen4ListData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 4, captionName: '业务领域/健康产业/技术支持' } },
|
||||
);
|
||||
this.screen4.list = res.rows.sort((a, b) => a.orders - b.orders);
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen5JoinusData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '业务领域/健康产业/joinus' } },
|
||||
);
|
||||
this.screen5.joinUs.title = res.rows[0].businessName;
|
||||
this.screen5.joinUs.contentCn = res.rows[0].titleChinese;
|
||||
this.screen5.joinUs.imageSrc = res.rows[0].imageurl;
|
||||
} catch (error) {}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-construction {
|
||||
width: 100%;
|
||||
}
|
||||
.screen1 {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 {
|
||||
position: relative;
|
||||
height: 1186rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen2 .wrapper1680 {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
border-bottom: 1rem solid;
|
||||
border-image: radial-gradient(circle, rgba(193, 200, 221, 1), rgba(191, 199, 222, 1), rgba(195, 203, 223, 1), rgba(175, 185, 208, 1)) 1 1;
|
||||
}
|
||||
.screen3 {
|
||||
position: relative;
|
||||
height: 1300rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen3 .wrapper1680 {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.screen3 .list-wrapper {
|
||||
position: absolute;
|
||||
top: 400rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0px 140rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.screen3 .list-item {
|
||||
margin: 0 58rem;
|
||||
width: 350rem;
|
||||
height: 350rem;
|
||||
margin-bottom: 90rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.screen3 .list-item:hover {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen3 .list-img {
|
||||
width: 150rem;
|
||||
height: 150rem;
|
||||
margin-bottom: 40rem;
|
||||
}
|
||||
.screen3 .list-title {
|
||||
text-align: center;
|
||||
font-size: 20rem;
|
||||
line-height: 1;
|
||||
color: #111111;
|
||||
margin-bottom: 26rem;
|
||||
}
|
||||
.screen3 .list-content {
|
||||
width: 280rem;
|
||||
white-space: normal;
|
||||
text-align: center;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 14rem;
|
||||
line-height: 22rem;
|
||||
color: #333333;
|
||||
}
|
||||
.screen4 {
|
||||
position: relative;
|
||||
height: 2410rem;
|
||||
background-color: #F5F5F8;
|
||||
}
|
||||
.screen4 .wrapper1680 {
|
||||
padding: 124rem 0;
|
||||
}
|
||||
.screen4 .list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n-1) {
|
||||
flex-direction: row;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.screen4 .list-item + .list-item {
|
||||
margin-top: 52rem;
|
||||
}
|
||||
.screen4 .content-wrapper {
|
||||
width: 755rem;
|
||||
}
|
||||
.screen4 .content-wrapper .title {
|
||||
padding: 0 1rem;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 42rem;
|
||||
color: #111111;
|
||||
margin-bottom: 36rem;
|
||||
}
|
||||
.screen4 .content-wrapper .content {
|
||||
padding: 5rem;
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-size: 20rem;
|
||||
line-height: 36rem;
|
||||
text-indent: 1.5em;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) .content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.screen4 .list-item:nth-of-type(2n) .content-wrapper .content {
|
||||
text-align: left;
|
||||
}
|
||||
.screen4 .image-wrapper {
|
||||
width: 752rem;
|
||||
height: 510rem;
|
||||
border-radius: 20rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.screen4 .image-wrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.screen4 .image-wrapper:hover img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.screen5 {
|
||||
position: relative;
|
||||
height: 823rem;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.screen5 .wrapper1680 {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.screen5 .plate-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.screen5 .plate-item {
|
||||
width: 325rem;
|
||||
height: 302rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-radius: 20rem;
|
||||
}
|
||||
.screen5 .plate-item:hover {
|
||||
overflow: hidden;
|
||||
box-shadow: 8rem 8rem 25rem 3rem #5E5E5E11;
|
||||
}
|
||||
.screen5 .plate-item:hover img {
|
||||
transition: transform 0.4s;
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen5 .split-line {
|
||||
border-bottom: 1rem solid;
|
||||
border-image: radial-gradient(circle, rgba(193, 200, 221, 1), rgba(191, 199, 222, 1), rgba(195, 203, 223, 1), rgba(175, 185, 208, 1)) 1 1;
|
||||
}
|
||||
.screen5 .join-btn-text {
|
||||
background-image: linear-gradient(90deg, #FF0300, #FFAA05);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -216,18 +216,21 @@
|
|||
<div
|
||||
class="text-posi-abs"
|
||||
style="--l:118rem;--t:523rem;--w:209rem;--h:57rem;--fs:24rem;--lh:57rem;--ff:MicrosoftYaHeiSemiBold;--ta:center;background-color:#ffffff;border-radius:28rem;cursor: pointer;"
|
||||
@click="$router.push('/recruit/socialRecruit')"
|
||||
>
|
||||
<!-- @click="$router.push('/recruit/socialRecruit')" -->
|
||||
<span class="join-btn-text">JOIN US</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FootBar theme="dark"></FootBar>
|
||||
<FootBar
|
||||
id="myfooter"
|
||||
theme="dark"
|
||||
></FootBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
export default {
|
||||
components: { FootBar },
|
||||
|
|
@ -289,6 +292,22 @@ export default {
|
|||
this.screen5.offsetLevel = i5;
|
||||
}
|
||||
},
|
||||
$route () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
|
|
@ -299,6 +318,7 @@ export default {
|
|||
this.getScreen5JoinusData();
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||
async getScreen2Data () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
|
|
|
|||
295
src/views/CompanyInformation/Index.vue
Normal file
295
src/views/CompanyInformation/Index.vue
Normal file
|
|
@ -0,0 +1,295 @@
|
|||
<template>
|
||||
<div class="news-trends-page">
|
||||
<div style="height:104rem;"></div>
|
||||
<div class="screen1">
|
||||
<img
|
||||
:src="screen1.bannerUrl"
|
||||
alt=""
|
||||
style="width:100%;"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen2">
|
||||
<div class="wrapper1680">
|
||||
<div class="title">
|
||||
公司资讯
|
||||
</div>
|
||||
<div class="news-wrapper">
|
||||
<div
|
||||
v-for="item in screen2.newsData"
|
||||
:key="item.id"
|
||||
class="news-item"
|
||||
@click="() => $router.push('/companyInformation/detail/' + item.id)"
|
||||
>
|
||||
<div class="news-cover">
|
||||
<img
|
||||
:src="item.cover"
|
||||
alt=""
|
||||
style="width:100%;height:100%;object-fit:cover;"
|
||||
>
|
||||
</div>
|
||||
<div class="news-info">
|
||||
<div class="title">
|
||||
{{ item.captionName }}
|
||||
</div>
|
||||
<div class="abstracts">
|
||||
{{ item.abstracts }}
|
||||
</div>
|
||||
<div class="date">
|
||||
{{ item.releaseTime.slice(0, 10) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-wrapper">
|
||||
<div
|
||||
class="page-prev"
|
||||
:class="{ 'page-btn-disabled': screen2.pageNum <= 1 }"
|
||||
@click="handlePrev"
|
||||
>
|
||||
<i class="el-icon-arrow-left"></i>
|
||||
</div>
|
||||
<div class="page-num">
|
||||
<span style="color: #E12F16;">{{ screen2.pageNum }}</span>
|
||||
<span>/{{ screen2.totalPage }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="page-next"
|
||||
:class="{ 'page-btn-disabled': screen2.pageNum >= screen2.totalPage }"
|
||||
@click="handleNext"
|
||||
>
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen3">
|
||||
<FootBar
|
||||
id="myfooter"
|
||||
theme="dark"
|
||||
></FootBar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FootBar,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
screen1: {
|
||||
bannerUrl: '',
|
||||
},
|
||||
screen2: {
|
||||
newsData: [],
|
||||
pageSize: 6,
|
||||
pageNum: 1,
|
||||
totalPage: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
scrollTop: state => state.scroll.scrollTop,
|
||||
webScale: state => state.web.scale,
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
scrollTop (val) {
|
||||
const v = val / this.webScale;
|
||||
if (v < 50) {
|
||||
this.$event.$emit('nav-theme', 'dark');
|
||||
} else {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
}
|
||||
const i2 = this.screen2.offsetLevel + 1;
|
||||
if (v >= this.screen2.offsets[i2]) {
|
||||
this.screen2.offsetLevel = i2;
|
||||
}
|
||||
const i3 = this.screen3.offsetLevel + 1;
|
||||
if (v >= this.screen3.offsets[i3]) {
|
||||
this.screen3.offsetLevel = i3;
|
||||
}
|
||||
const i4 = this.screen4.offsetLevel + 1;
|
||||
if (v >= this.screen4.offsets[i4]) {
|
||||
this.screen4.offsetLevel = i4;
|
||||
}
|
||||
},
|
||||
$route () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
this.getScreen1Banner();
|
||||
this.getScreen2NewsData({ pageNum: this.screen2.pageNum, pageSize: this.screen2.pageSize });
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||
async getScreen1Banner () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '新闻资讯/公司资讯/banner' } },
|
||||
);
|
||||
this.screen1.bannerUrl = res.rows[0].imageurl;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen2NewsData (params) {
|
||||
try {
|
||||
const res = await this.$request.get('/official/slideshow/list', { params: { ...params, type: '1' } });
|
||||
this.screen2.newsData = res.rows;
|
||||
this.screen2.totalPage = Math.ceil(res.total / this.screen2.pageSize);
|
||||
this.screen2.pageNum = params.pageNum;
|
||||
} catch (error) {}
|
||||
},
|
||||
handlePrev () {
|
||||
if (this.screen2.pageNum <= 1) return;
|
||||
this.getScreen2NewsData({ pageNum: this.screen2.pageNum - 1, pageSize: this.screen2.pageSize });
|
||||
},
|
||||
handleNext () {
|
||||
if (this.screen2.pageNum >= this.screen2.totalPage) return;
|
||||
this.getScreen2NewsData({ pageNum: this.screen2.pageNum + 1, pageSize: this.screen2.pageSize });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.news-trends-page{
|
||||
width: 100%;
|
||||
background: #F5F5F7;
|
||||
}
|
||||
.screen1 {
|
||||
min-height: 600rem;
|
||||
}
|
||||
.screen2 {
|
||||
box-sizing: border-box;
|
||||
padding: 59rem 0;
|
||||
}
|
||||
.screen2 .title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 30rem;
|
||||
color: #111111;
|
||||
line-height: 64rem;
|
||||
margin-bottom: 23rem;
|
||||
}
|
||||
.screen2 .news-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.screen2 .news-item {
|
||||
width: 510rem;
|
||||
height: 505rem;
|
||||
border-radius: 10rem;
|
||||
background-color: #ffffff;
|
||||
box-shadow: rgba(28, 28, 30, 0.05) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.05) 0rem 8rem 16rem 0rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 60rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.screen2 .news-item:not(:nth-of-type(3n)) {
|
||||
margin-right: calc((1680rem - 510rem * 3) / 2);
|
||||
}
|
||||
.screen2 .news-item:hover {
|
||||
box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
|
||||
z-index: 10;
|
||||
}
|
||||
.screen2 .news-cover {
|
||||
width: 510rem;
|
||||
height: 302rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.screen2 .news-cover img {
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.screen2 .news-cover:hover img {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen2 .news-info {
|
||||
padding: 55rem 35rem 0;
|
||||
}
|
||||
.screen2 .news-info .title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16rem;
|
||||
line-height: 16rem;
|
||||
color: #000000;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 16rem;
|
||||
}
|
||||
.screen2 .news-info .abstracts {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12rem;
|
||||
line-height: 14rem;
|
||||
color: #666666;
|
||||
margin-bottom: 20rem;
|
||||
}
|
||||
.screen2 .news-info .date {
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-weight: 400;
|
||||
font-size: 12rem;
|
||||
line-height: 12rem;
|
||||
color: #666666;
|
||||
}
|
||||
.screen2 .pagination-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.screen2 .pagination-wrapper .page-prev,
|
||||
.screen2 .pagination-wrapper .page-next {
|
||||
width: 35rem;
|
||||
height: 35rem;
|
||||
box-sizing: border-box;
|
||||
border: 1rem solid #818692;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #818692;
|
||||
border-radius: 4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.screen2 .pagination-wrapper .page-prev.page-btn-disabled,
|
||||
.screen2 .pagination-wrapper .page-next.page-btn-disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.screen2 .pagination-wrapper .page-prev:not(.page-btn-disabled):hover,
|
||||
.screen2 .pagination-wrapper .page-next:not(.page-btn-disabled):hover {
|
||||
border-color: #111111;
|
||||
color: #111111;
|
||||
}
|
||||
.screen2 .pagination-wrapper .page-num {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 18rem;
|
||||
line-height: 18rem;
|
||||
color: #818692;
|
||||
width: 90rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
258
src/views/CompanyInformation/InformDetail.vue
Normal file
258
src/views/CompanyInformation/InformDetail.vue
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
<template>
|
||||
<div class="page-news-detail">
|
||||
<div style="height:104rem;"></div>
|
||||
<div class="screen1">
|
||||
<img
|
||||
:src="screen1.bannerUrl"
|
||||
alt=""
|
||||
style="width:100%;"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen2">
|
||||
<div class="wrapper1400">
|
||||
<div class="news-title">
|
||||
{{ newsDetail.captionName }}
|
||||
</div>
|
||||
<div class="news-info">
|
||||
<span>{{ newsDetail.releaseTime.slice(0, 10) }}</span>
|
||||
<span>{{ newsDetail.groupName }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="news-content ql-editor"
|
||||
v-html="newsDetail.newsContent"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen3">
|
||||
<div class="wrapper1400">
|
||||
<div class="title">
|
||||
更多推荐
|
||||
</div>
|
||||
<div class="news-wrapper">
|
||||
<div
|
||||
v-for="item in recommendData"
|
||||
:key="item.id"
|
||||
class="news-item"
|
||||
@click="() => $router.push('/companyInformation/detail/' + item.id)"
|
||||
>
|
||||
<div class="news-cover">
|
||||
<img
|
||||
:src="item.cover"
|
||||
alt=""
|
||||
style="width:100%;height:100%;object-fit:cover;"
|
||||
>
|
||||
</div>
|
||||
<div class="news-info">
|
||||
<div class="title">
|
||||
{{ item.captionName }}
|
||||
</div>
|
||||
<div class="abstracts">
|
||||
{{ item.abstracts }}
|
||||
</div>
|
||||
<div class="date">
|
||||
{{ item.releaseTime.slice(0, 10) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
screen1: {
|
||||
bannerUrl: '',
|
||||
},
|
||||
currentNewsId: '',
|
||||
prevNewsId: '',
|
||||
nextNewsId: '',
|
||||
newsDetail: {
|
||||
releaseTime: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentId () {
|
||||
return this.$route.params.newsId;
|
||||
},
|
||||
recommendData () {
|
||||
return [].concat(
|
||||
this.newsDetail.slideshowMap?.previous ? [this.newsDetail.slideshowMap.previous] : [],
|
||||
[this.newsDetail],
|
||||
this.newsDetail.slideshowMap?.nextArticle ? [this.newsDetail.slideshowMap.nextArticle] : [],
|
||||
);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
currentId: {
|
||||
handler (v) {
|
||||
document.getElementById('app').scrollTop = 0;
|
||||
this.getNewsDetail(v);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
this.getScreen1Banner();
|
||||
},
|
||||
methods: {
|
||||
async getScreen1Banner () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '新闻资讯/公司资讯/公司资讯详情/banner' } },
|
||||
);
|
||||
this.screen1.bannerUrl = res.rows[0].imageurl;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getNewsDetail (currentNewsId) {
|
||||
try {
|
||||
const res = await this.$request.get('/official/slideshow/' + currentNewsId);
|
||||
this.newsDetail = res.data;
|
||||
this.prevNewsId = res.data.slideshowMap.previous?.id || '';
|
||||
this.nextNewsId = res.data.slideshowMap.nextArticle?.id || '';
|
||||
} catch (error) {}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-news-detail{
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.screen1 {
|
||||
min-height: 600rem;
|
||||
}
|
||||
.screen2 {
|
||||
background-color: #ffffff;
|
||||
padding-top: 135rem;
|
||||
padding-bottom: 90rem;
|
||||
}
|
||||
.screen2 .news-title {
|
||||
text-align: center;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 30rem;
|
||||
color: #111111;
|
||||
line-height: 36rem;
|
||||
}
|
||||
.screen2 .news-info {
|
||||
height: 58rem;
|
||||
padding-top: 50rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1rem solid #999999;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16rem;
|
||||
color: #999999;
|
||||
line-height: 36rem;
|
||||
}
|
||||
.screen2 .news-content {
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-weight: 400;
|
||||
font-size: 18rem;
|
||||
color: #111111;
|
||||
line-height: 36rem;
|
||||
margin-top: 30rem;
|
||||
}
|
||||
.screen2 .news-content >>> p {
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
.screen3 {
|
||||
height: auto;
|
||||
display: flex;
|
||||
padding: 10rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.screen3 .title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 24rem;
|
||||
line-height: 88rem;
|
||||
color: #141414;
|
||||
}
|
||||
.screen3 .news-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.screen3 .news-item {
|
||||
width: 430rem;
|
||||
height: 505rem;
|
||||
border-radius: 10rem;
|
||||
background-color: #ffffff;
|
||||
box-shadow: rgba(28, 28, 30, 0.05) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.05) 0rem 8rem 16rem 0rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 60rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.screen3 .news-item:not(:nth-of-type(3n)) {
|
||||
margin-right: calc((1400rem - 430rem * 3) / 2);
|
||||
}
|
||||
.screen3 .news-item:hover {
|
||||
box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
|
||||
z-index: 10;
|
||||
}
|
||||
.screen3 .news-cover {
|
||||
width: 510rem;
|
||||
height: 302rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.screen3 .news-cover img {
|
||||
transition: transform 0.4s;
|
||||
width: 100%;
|
||||
}
|
||||
.screen3 .news-cover:hover img {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen3 .news-info {
|
||||
padding: 55rem 35rem 0;
|
||||
}
|
||||
.screen3 .news-info .title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16rem;
|
||||
line-height: 16rem;
|
||||
color: #000000;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 16rem;
|
||||
}
|
||||
.screen3 .news-info .abstracts {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12rem;
|
||||
line-height: 14rem;
|
||||
color: #666666;
|
||||
margin-bottom: 20rem;
|
||||
}
|
||||
.screen3 .news-info .date {
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-weight: 400;
|
||||
font-size: 12rem;
|
||||
line-height: 12rem;
|
||||
color: #666666;
|
||||
}
|
||||
.ql-editor {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.news-content >>> .ql-align-center {
|
||||
width: 100%;
|
||||
}
|
||||
.news-content >>> .ql-align-center img {
|
||||
width: 100%!important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -186,12 +186,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<FootBar theme="dark"></FootBar>
|
||||
<FootBar
|
||||
id="myfooter"
|
||||
theme="dark"
|
||||
></FootBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import ArrowHalfRound from '@/components/ArrowHalfRound.vue';
|
||||
import HomeCarousel from './components/HomeCarousel.vue';
|
||||
import HomeCarouselIndicator from './components/HomeCarouselIndicator.vue';
|
||||
|
|
@ -260,6 +263,14 @@ export default {
|
|||
this.screen4.offsetLevel = i4;
|
||||
}
|
||||
},
|
||||
$route () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'dark');
|
||||
|
|
@ -268,7 +279,16 @@ export default {
|
|||
this.getScreen3CarouselData();
|
||||
this.getScreen4NewsData();
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||
async getScreen1CarouselData () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
|
|
|
|||
295
src/views/IndustryDynamics/Index.vue
Normal file
295
src/views/IndustryDynamics/Index.vue
Normal file
|
|
@ -0,0 +1,295 @@
|
|||
<template>
|
||||
<div class="news-trends-page">
|
||||
<div style="height:104rem;"></div>
|
||||
<div class="screen1">
|
||||
<img
|
||||
:src="screen1.bannerUrl"
|
||||
alt=""
|
||||
style="width:100%;"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen2">
|
||||
<div class="wrapper1680">
|
||||
<div class="title">
|
||||
行业动态
|
||||
</div>
|
||||
<div class="news-wrapper">
|
||||
<div
|
||||
v-for="item in screen2.newsData"
|
||||
:key="item.id"
|
||||
class="news-item"
|
||||
@click="() => $router.push('/industryDynamics/detail/' + item.id)"
|
||||
>
|
||||
<div class="news-cover">
|
||||
<img
|
||||
:src="item.cover"
|
||||
alt=""
|
||||
style="width:100%;height:100%;object-fit:cover;"
|
||||
>
|
||||
</div>
|
||||
<div class="news-info">
|
||||
<div class="title">
|
||||
{{ item.captionName }}
|
||||
</div>
|
||||
<div class="abstracts">
|
||||
{{ item.abstracts }}
|
||||
</div>
|
||||
<div class="date">
|
||||
{{ item.releaseTime.slice(0, 10) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-wrapper">
|
||||
<div
|
||||
class="page-prev"
|
||||
:class="{ 'page-btn-disabled': screen2.pageNum <= 1 }"
|
||||
@click="handlePrev"
|
||||
>
|
||||
<i class="el-icon-arrow-left"></i>
|
||||
</div>
|
||||
<div class="page-num">
|
||||
<span style="color: #E12F16;">{{ screen2.pageNum }}</span>
|
||||
<span>/{{ screen2.totalPage }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="page-next"
|
||||
:class="{ 'page-btn-disabled': screen2.pageNum >= screen2.totalPage }"
|
||||
@click="handleNext"
|
||||
>
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen3">
|
||||
<FootBar
|
||||
id="myfooter"
|
||||
theme="dark"
|
||||
></FootBar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FootBar,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
screen1: {
|
||||
bannerUrl: '',
|
||||
},
|
||||
screen2: {
|
||||
newsData: [],
|
||||
pageSize: 6,
|
||||
pageNum: 1,
|
||||
totalPage: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
scrollTop: state => state.scroll.scrollTop,
|
||||
webScale: state => state.web.scale,
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
scrollTop (val) {
|
||||
const v = val / this.webScale;
|
||||
if (v < 50) {
|
||||
this.$event.$emit('nav-theme', 'dark');
|
||||
} else {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
}
|
||||
const i2 = this.screen2.offsetLevel + 1;
|
||||
if (v >= this.screen2.offsets[i2]) {
|
||||
this.screen2.offsetLevel = i2;
|
||||
}
|
||||
const i3 = this.screen3.offsetLevel + 1;
|
||||
if (v >= this.screen3.offsets[i3]) {
|
||||
this.screen3.offsetLevel = i3;
|
||||
}
|
||||
const i4 = this.screen4.offsetLevel + 1;
|
||||
if (v >= this.screen4.offsets[i4]) {
|
||||
this.screen4.offsetLevel = i4;
|
||||
}
|
||||
},
|
||||
$route () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
this.getScreen1Banner();
|
||||
this.getScreen2NewsData({ pageNum: this.screen2.pageNum, pageSize: this.screen2.pageSize });
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||
async getScreen1Banner () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '新闻资讯/行业动态/banner' } },
|
||||
);
|
||||
this.screen1.bannerUrl = res.rows[0].imageurl;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen2NewsData (params) {
|
||||
try {
|
||||
const res = await this.$request.get('/official/slideshow/list', { params: { ...params, type: '3' } });
|
||||
this.screen2.newsData = res.rows;
|
||||
this.screen2.totalPage = Math.ceil(res.total / this.screen2.pageSize);
|
||||
this.screen2.pageNum = params.pageNum;
|
||||
} catch (error) {}
|
||||
},
|
||||
handlePrev () {
|
||||
if (this.screen2.pageNum <= 1) return;
|
||||
this.getScreen2NewsData({ pageNum: this.screen2.pageNum - 1, pageSize: this.screen2.pageSize });
|
||||
},
|
||||
handleNext () {
|
||||
if (this.screen2.pageNum >= this.screen2.totalPage) return;
|
||||
this.getScreen2NewsData({ pageNum: this.screen2.pageNum + 1, pageSize: this.screen2.pageSize });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.news-trends-page{
|
||||
width: 100%;
|
||||
background: #F5F5F7;
|
||||
}
|
||||
.screen1 {
|
||||
min-height: 600rem;
|
||||
}
|
||||
.screen2 {
|
||||
box-sizing: border-box;
|
||||
padding: 59rem 0;
|
||||
}
|
||||
.screen2 .title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 30rem;
|
||||
color: #111111;
|
||||
line-height: 64rem;
|
||||
margin-bottom: 23rem;
|
||||
}
|
||||
.screen2 .news-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.screen2 .news-item {
|
||||
width: 510rem;
|
||||
height: 505rem;
|
||||
border-radius: 10rem;
|
||||
background-color: #ffffff;
|
||||
box-shadow: rgba(28, 28, 30, 0.05) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.05) 0rem 8rem 16rem 0rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 60rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.screen2 .news-item:not(:nth-of-type(3n)) {
|
||||
margin-right: calc((1680rem - 510rem * 3) / 2);
|
||||
}
|
||||
.screen2 .news-item:hover {
|
||||
box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
|
||||
z-index: 10;
|
||||
}
|
||||
.screen2 .news-cover {
|
||||
width: 510rem;
|
||||
height: 302rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.screen2 .news-cover img {
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.screen2 .news-cover:hover img {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen2 .news-info {
|
||||
padding: 55rem 35rem 0;
|
||||
}
|
||||
.screen2 .news-info .title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16rem;
|
||||
line-height: 16rem;
|
||||
color: #000000;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 16rem;
|
||||
}
|
||||
.screen2 .news-info .abstracts {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12rem;
|
||||
line-height: 14rem;
|
||||
color: #666666;
|
||||
margin-bottom: 20rem;
|
||||
}
|
||||
.screen2 .news-info .date {
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-weight: 400;
|
||||
font-size: 12rem;
|
||||
line-height: 12rem;
|
||||
color: #666666;
|
||||
}
|
||||
.screen2 .pagination-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.screen2 .pagination-wrapper .page-prev,
|
||||
.screen2 .pagination-wrapper .page-next {
|
||||
width: 35rem;
|
||||
height: 35rem;
|
||||
box-sizing: border-box;
|
||||
border: 1rem solid #818692;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #818692;
|
||||
border-radius: 4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.screen2 .pagination-wrapper .page-prev.page-btn-disabled,
|
||||
.screen2 .pagination-wrapper .page-next.page-btn-disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.screen2 .pagination-wrapper .page-prev:not(.page-btn-disabled):hover,
|
||||
.screen2 .pagination-wrapper .page-next:not(.page-btn-disabled):hover {
|
||||
border-color: #111111;
|
||||
color: #111111;
|
||||
}
|
||||
.screen2 .pagination-wrapper .page-num {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 18rem;
|
||||
line-height: 18rem;
|
||||
color: #818692;
|
||||
width: 90rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
258
src/views/IndustryDynamics/InformDetail.vue
Normal file
258
src/views/IndustryDynamics/InformDetail.vue
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
<template>
|
||||
<div class="page-news-detail">
|
||||
<div style="height:104rem;"></div>
|
||||
<div class="screen1">
|
||||
<img
|
||||
:src="screen1.bannerUrl"
|
||||
alt=""
|
||||
style="width:100%;"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen2">
|
||||
<div class="wrapper1400">
|
||||
<div class="news-title">
|
||||
{{ newsDetail.captionName }}
|
||||
</div>
|
||||
<div class="news-info">
|
||||
<span>{{ newsDetail.releaseTime.slice(0, 10) }}</span>
|
||||
<span>{{ newsDetail.groupName }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="news-content ql-editor"
|
||||
v-html="newsDetail.newsContent"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen3">
|
||||
<div class="wrapper1400">
|
||||
<div class="title">
|
||||
更多推荐
|
||||
</div>
|
||||
<div class="news-wrapper">
|
||||
<div
|
||||
v-for="item in recommendData"
|
||||
:key="item.id"
|
||||
class="news-item"
|
||||
@click="() => $router.push('/industryDynamics/detail/' + item.id)"
|
||||
>
|
||||
<div class="news-cover">
|
||||
<img
|
||||
:src="item.cover"
|
||||
alt=""
|
||||
style="width:100%;height:100%;object-fit:cover;"
|
||||
>
|
||||
</div>
|
||||
<div class="news-info">
|
||||
<div class="title">
|
||||
{{ item.captionName }}
|
||||
</div>
|
||||
<div class="abstracts">
|
||||
{{ item.abstracts }}
|
||||
</div>
|
||||
<div class="date">
|
||||
{{ item.releaseTime.slice(0, 10) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
screen1: {
|
||||
bannerUrl: '',
|
||||
},
|
||||
currentNewsId: '',
|
||||
prevNewsId: '',
|
||||
nextNewsId: '',
|
||||
newsDetail: {
|
||||
releaseTime: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentId () {
|
||||
return this.$route.params.newsId;
|
||||
},
|
||||
recommendData () {
|
||||
return [].concat(
|
||||
this.newsDetail.slideshowMap?.previous ? [this.newsDetail.slideshowMap.previous] : [],
|
||||
[this.newsDetail],
|
||||
this.newsDetail.slideshowMap?.nextArticle ? [this.newsDetail.slideshowMap.nextArticle] : [],
|
||||
);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
currentId: {
|
||||
handler (v) {
|
||||
document.getElementById('app').scrollTop = 0;
|
||||
this.getNewsDetail(v);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
this.getScreen1Banner();
|
||||
},
|
||||
methods: {
|
||||
async getScreen1Banner () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '新闻资讯/行业动态/行业动态详情/banner' } },
|
||||
);
|
||||
this.screen1.bannerUrl = res.rows[0].imageurl;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getNewsDetail (currentNewsId) {
|
||||
try {
|
||||
const res = await this.$request.get('/official/slideshow/' + currentNewsId);
|
||||
this.newsDetail = res.data;
|
||||
this.prevNewsId = res.data.slideshowMap.previous?.id || '';
|
||||
this.nextNewsId = res.data.slideshowMap.nextArticle?.id || '';
|
||||
} catch (error) {}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-news-detail{
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.screen1 {
|
||||
min-height: 600rem;
|
||||
}
|
||||
.screen2 {
|
||||
background-color: #ffffff;
|
||||
padding-top: 135rem;
|
||||
padding-bottom: 90rem;
|
||||
}
|
||||
.screen2 .news-title {
|
||||
text-align: center;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 30rem;
|
||||
color: #111111;
|
||||
line-height: 36rem;
|
||||
}
|
||||
.screen2 .news-info {
|
||||
height: 58rem;
|
||||
padding-top: 50rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1rem solid #999999;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16rem;
|
||||
color: #999999;
|
||||
line-height: 36rem;
|
||||
}
|
||||
.screen2 .news-content {
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-weight: 400;
|
||||
font-size: 18rem;
|
||||
color: #111111;
|
||||
line-height: 36rem;
|
||||
margin-top: 30rem;
|
||||
}
|
||||
.screen2 .news-content >>> p {
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
.screen3 {
|
||||
height: auto;
|
||||
display: flex;
|
||||
padding: 10rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.screen3 .title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 24rem;
|
||||
line-height: 88rem;
|
||||
color: #141414;
|
||||
}
|
||||
.screen3 .news-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.screen3 .news-item {
|
||||
width: 430rem;
|
||||
height: 505rem;
|
||||
border-radius: 10rem;
|
||||
background-color: #ffffff;
|
||||
box-shadow: rgba(28, 28, 30, 0.05) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.05) 0rem 8rem 16rem 0rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 60rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.screen3 .news-item:not(:nth-of-type(3n)) {
|
||||
margin-right: calc((1400rem - 430rem * 3) / 2);
|
||||
}
|
||||
.screen3 .news-item:hover {
|
||||
box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
|
||||
z-index: 10;
|
||||
}
|
||||
.screen3 .news-cover {
|
||||
width: 510rem;
|
||||
height: 302rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.screen3 .news-cover img {
|
||||
transition: transform 0.4s;
|
||||
width: 100%;
|
||||
}
|
||||
.screen3 .news-cover:hover img {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen3 .news-info {
|
||||
padding: 55rem 35rem 0;
|
||||
}
|
||||
.screen3 .news-info .title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16rem;
|
||||
line-height: 16rem;
|
||||
color: #000000;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 16rem;
|
||||
}
|
||||
.screen3 .news-info .abstracts {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12rem;
|
||||
line-height: 14rem;
|
||||
color: #666666;
|
||||
margin-bottom: 20rem;
|
||||
}
|
||||
.screen3 .news-info .date {
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-weight: 400;
|
||||
font-size: 12rem;
|
||||
line-height: 12rem;
|
||||
color: #666666;
|
||||
}
|
||||
.ql-editor {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.news-content >>> .ql-align-center {
|
||||
width: 100%;
|
||||
}
|
||||
.news-content >>> .ql-align-center img {
|
||||
width: 100%!important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<div class="screen2">
|
||||
<div class="wrapper1680">
|
||||
<div class="title">
|
||||
新闻动态
|
||||
公告通知
|
||||
</div>
|
||||
<div class="news-wrapper">
|
||||
<div
|
||||
|
|
@ -63,12 +63,16 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="screen3">
|
||||
<FootBar theme="dark"></FootBar>
|
||||
<FootBar
|
||||
id="myfooter"
|
||||
theme="dark"
|
||||
></FootBar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -88,24 +92,69 @@ export default {
|
|||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
scrollTop: state => state.scroll.scrollTop,
|
||||
webScale: state => state.web.scale,
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
scrollTop (val) {
|
||||
const v = val / this.webScale;
|
||||
if (v < 50) {
|
||||
this.$event.$emit('nav-theme', 'dark');
|
||||
} else {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
}
|
||||
const i2 = this.screen2.offsetLevel + 1;
|
||||
if (v >= this.screen2.offsets[i2]) {
|
||||
this.screen2.offsetLevel = i2;
|
||||
}
|
||||
const i3 = this.screen3.offsetLevel + 1;
|
||||
if (v >= this.screen3.offsets[i3]) {
|
||||
this.screen3.offsetLevel = i3;
|
||||
}
|
||||
const i4 = this.screen4.offsetLevel + 1;
|
||||
if (v >= this.screen4.offsets[i4]) {
|
||||
this.screen4.offsetLevel = i4;
|
||||
}
|
||||
},
|
||||
$route () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
this.getScreen1Banner();
|
||||
this.getScreen2NewsData({ pageNum: this.screen2.pageNum, pageSize: this.screen2.pageSize });
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||
async getScreen1Banner () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '新闻动态/banner' } },
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '新闻资讯/公告通知/banner' } },
|
||||
);
|
||||
this.screen1.bannerUrl = res.rows[0].imageurl;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen2NewsData (params) {
|
||||
try {
|
||||
const res = await this.$request.get('/official/slideshow/list', { params: { ...params, type: '1' } });
|
||||
const res = await this.$request.get('/official/slideshow/list', { params: { ...params, type: '0' } });
|
||||
this.screen2.newsData = res.rows;
|
||||
this.screen2.totalPage = Math.ceil(res.total / this.screen2.pageSize);
|
||||
this.screen2.pageNum = params.pageNum;
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ export default {
|
|||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '新闻动态/新闻详情/banner' } },
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '新闻资讯/公告通知/公告通知详情/banner' } },
|
||||
);
|
||||
this.screen1.bannerUrl = res.rows[0].imageurl;
|
||||
} catch (error) {}
|
||||
|
|
|
|||
295
src/views/PolicyRegulations/Index.vue
Normal file
295
src/views/PolicyRegulations/Index.vue
Normal file
|
|
@ -0,0 +1,295 @@
|
|||
<template>
|
||||
<div class="news-trends-page">
|
||||
<div style="height:104rem;"></div>
|
||||
<div class="screen1">
|
||||
<img
|
||||
:src="screen1.bannerUrl"
|
||||
alt=""
|
||||
style="width:100%;"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen2">
|
||||
<div class="wrapper1680">
|
||||
<div class="title">
|
||||
政策法规
|
||||
</div>
|
||||
<div class="news-wrapper">
|
||||
<div
|
||||
v-for="item in screen2.newsData"
|
||||
:key="item.id"
|
||||
class="news-item"
|
||||
@click="() => $router.push('/policyRegulations/detail/' + item.id)"
|
||||
>
|
||||
<div class="news-cover">
|
||||
<img
|
||||
:src="item.cover"
|
||||
alt=""
|
||||
style="width:100%;height:100%;object-fit:cover;"
|
||||
>
|
||||
</div>
|
||||
<div class="news-info">
|
||||
<div class="title">
|
||||
{{ item.captionName }}
|
||||
</div>
|
||||
<div class="abstracts">
|
||||
{{ item.abstracts }}
|
||||
</div>
|
||||
<div class="date">
|
||||
{{ item.releaseTime.slice(0, 10) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-wrapper">
|
||||
<div
|
||||
class="page-prev"
|
||||
:class="{ 'page-btn-disabled': screen2.pageNum <= 1 }"
|
||||
@click="handlePrev"
|
||||
>
|
||||
<i class="el-icon-arrow-left"></i>
|
||||
</div>
|
||||
<div class="page-num">
|
||||
<span style="color: #E12F16;">{{ screen2.pageNum }}</span>
|
||||
<span>/{{ screen2.totalPage }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="page-next"
|
||||
:class="{ 'page-btn-disabled': screen2.pageNum >= screen2.totalPage }"
|
||||
@click="handleNext"
|
||||
>
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen3">
|
||||
<FootBar
|
||||
id="myfooter"
|
||||
theme="dark"
|
||||
></FootBar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations, mapState } from 'vuex';
|
||||
import FootBar from '@/components/FootBar.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FootBar,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
screen1: {
|
||||
bannerUrl: '',
|
||||
},
|
||||
screen2: {
|
||||
newsData: [],
|
||||
pageSize: 6,
|
||||
pageNum: 1,
|
||||
totalPage: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
scrollTop: state => state.scroll.scrollTop,
|
||||
webScale: state => state.web.scale,
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
scrollTop (val) {
|
||||
const v = val / this.webScale;
|
||||
if (v < 50) {
|
||||
this.$event.$emit('nav-theme', 'dark');
|
||||
} else {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
}
|
||||
const i2 = this.screen2.offsetLevel + 1;
|
||||
if (v >= this.screen2.offsets[i2]) {
|
||||
this.screen2.offsetLevel = i2;
|
||||
}
|
||||
const i3 = this.screen3.offsetLevel + 1;
|
||||
if (v >= this.screen3.offsets[i3]) {
|
||||
this.screen3.offsetLevel = i3;
|
||||
}
|
||||
const i4 = this.screen4.offsetLevel + 1;
|
||||
if (v >= this.screen4.offsets[i4]) {
|
||||
this.screen4.offsetLevel = i4;
|
||||
}
|
||||
},
|
||||
$route () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
if (this.$route.hash) {
|
||||
this.forceScroll({
|
||||
top: document.getElementById(this.$route.hash.slice(1)).offsetTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
this.getScreen1Banner();
|
||||
this.getScreen2NewsData({ pageNum: this.screen2.pageNum, pageSize: this.screen2.pageSize });
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['forceScroll', 'setScrollTop']),
|
||||
async getScreen1Banner () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '新闻资讯/政策法规/banner' } },
|
||||
);
|
||||
this.screen1.bannerUrl = res.rows[0].imageurl;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getScreen2NewsData (params) {
|
||||
try {
|
||||
const res = await this.$request.get('/official/slideshow/list', { params: { ...params, type: '2' } });
|
||||
this.screen2.newsData = res.rows;
|
||||
this.screen2.totalPage = Math.ceil(res.total / this.screen2.pageSize);
|
||||
this.screen2.pageNum = params.pageNum;
|
||||
} catch (error) {}
|
||||
},
|
||||
handlePrev () {
|
||||
if (this.screen2.pageNum <= 1) return;
|
||||
this.getScreen2NewsData({ pageNum: this.screen2.pageNum - 1, pageSize: this.screen2.pageSize });
|
||||
},
|
||||
handleNext () {
|
||||
if (this.screen2.pageNum >= this.screen2.totalPage) return;
|
||||
this.getScreen2NewsData({ pageNum: this.screen2.pageNum + 1, pageSize: this.screen2.pageSize });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.news-trends-page{
|
||||
width: 100%;
|
||||
background: #F5F5F7;
|
||||
}
|
||||
.screen1 {
|
||||
min-height: 600rem;
|
||||
}
|
||||
.screen2 {
|
||||
box-sizing: border-box;
|
||||
padding: 59rem 0;
|
||||
}
|
||||
.screen2 .title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 30rem;
|
||||
color: #111111;
|
||||
line-height: 64rem;
|
||||
margin-bottom: 23rem;
|
||||
}
|
||||
.screen2 .news-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.screen2 .news-item {
|
||||
width: 510rem;
|
||||
height: 505rem;
|
||||
border-radius: 10rem;
|
||||
background-color: #ffffff;
|
||||
box-shadow: rgba(28, 28, 30, 0.05) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.05) 0rem 8rem 16rem 0rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 60rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.screen2 .news-item:not(:nth-of-type(3n)) {
|
||||
margin-right: calc((1680rem - 510rem * 3) / 2);
|
||||
}
|
||||
.screen2 .news-item:hover {
|
||||
box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
|
||||
z-index: 10;
|
||||
}
|
||||
.screen2 .news-cover {
|
||||
width: 510rem;
|
||||
height: 302rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.screen2 .news-cover img {
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.screen2 .news-cover:hover img {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen2 .news-info {
|
||||
padding: 55rem 35rem 0;
|
||||
}
|
||||
.screen2 .news-info .title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16rem;
|
||||
line-height: 16rem;
|
||||
color: #000000;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 16rem;
|
||||
}
|
||||
.screen2 .news-info .abstracts {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12rem;
|
||||
line-height: 14rem;
|
||||
color: #666666;
|
||||
margin-bottom: 20rem;
|
||||
}
|
||||
.screen2 .news-info .date {
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-weight: 400;
|
||||
font-size: 12rem;
|
||||
line-height: 12rem;
|
||||
color: #666666;
|
||||
}
|
||||
.screen2 .pagination-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.screen2 .pagination-wrapper .page-prev,
|
||||
.screen2 .pagination-wrapper .page-next {
|
||||
width: 35rem;
|
||||
height: 35rem;
|
||||
box-sizing: border-box;
|
||||
border: 1rem solid #818692;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #818692;
|
||||
border-radius: 4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.screen2 .pagination-wrapper .page-prev.page-btn-disabled,
|
||||
.screen2 .pagination-wrapper .page-next.page-btn-disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.screen2 .pagination-wrapper .page-prev:not(.page-btn-disabled):hover,
|
||||
.screen2 .pagination-wrapper .page-next:not(.page-btn-disabled):hover {
|
||||
border-color: #111111;
|
||||
color: #111111;
|
||||
}
|
||||
.screen2 .pagination-wrapper .page-num {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 18rem;
|
||||
line-height: 18rem;
|
||||
color: #818692;
|
||||
width: 90rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
258
src/views/PolicyRegulations/InformDetail.vue
Normal file
258
src/views/PolicyRegulations/InformDetail.vue
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
<template>
|
||||
<div class="page-news-detail">
|
||||
<div style="height:104rem;"></div>
|
||||
<div class="screen1">
|
||||
<img
|
||||
:src="screen1.bannerUrl"
|
||||
alt=""
|
||||
style="width:100%;"
|
||||
/>
|
||||
</div>
|
||||
<div class="screen2">
|
||||
<div class="wrapper1400">
|
||||
<div class="news-title">
|
||||
{{ newsDetail.captionName }}
|
||||
</div>
|
||||
<div class="news-info">
|
||||
<span>{{ newsDetail.releaseTime.slice(0, 10) }}</span>
|
||||
<span>{{ newsDetail.groupName }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="news-content ql-editor"
|
||||
v-html="newsDetail.newsContent"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen3">
|
||||
<div class="wrapper1400">
|
||||
<div class="title">
|
||||
更多推荐
|
||||
</div>
|
||||
<div class="news-wrapper">
|
||||
<div
|
||||
v-for="item in recommendData"
|
||||
:key="item.id"
|
||||
class="news-item"
|
||||
@click="() => $router.push('/policyRegulations/detail/' + item.id)"
|
||||
>
|
||||
<div class="news-cover">
|
||||
<img
|
||||
:src="item.cover"
|
||||
alt=""
|
||||
style="width:100%;height:100%;object-fit:cover;"
|
||||
>
|
||||
</div>
|
||||
<div class="news-info">
|
||||
<div class="title">
|
||||
{{ item.captionName }}
|
||||
</div>
|
||||
<div class="abstracts">
|
||||
{{ item.abstracts }}
|
||||
</div>
|
||||
<div class="date">
|
||||
{{ item.releaseTime.slice(0, 10) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
screen1: {
|
||||
bannerUrl: '',
|
||||
},
|
||||
currentNewsId: '',
|
||||
prevNewsId: '',
|
||||
nextNewsId: '',
|
||||
newsDetail: {
|
||||
releaseTime: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentId () {
|
||||
return this.$route.params.newsId;
|
||||
},
|
||||
recommendData () {
|
||||
return [].concat(
|
||||
this.newsDetail.slideshowMap?.previous ? [this.newsDetail.slideshowMap.previous] : [],
|
||||
[this.newsDetail],
|
||||
this.newsDetail.slideshowMap?.nextArticle ? [this.newsDetail.slideshowMap.nextArticle] : [],
|
||||
);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
currentId: {
|
||||
handler (v) {
|
||||
document.getElementById('app').scrollTop = 0;
|
||||
this.getNewsDetail(v);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.$event.$emit('nav-theme', 'light');
|
||||
this.getScreen1Banner();
|
||||
},
|
||||
methods: {
|
||||
async getScreen1Banner () {
|
||||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '新闻资讯/政策法规/政策法规详情/banner' } },
|
||||
);
|
||||
this.screen1.bannerUrl = res.rows[0].imageurl;
|
||||
} catch (error) {}
|
||||
},
|
||||
async getNewsDetail (currentNewsId) {
|
||||
try {
|
||||
const res = await this.$request.get('/official/slideshow/' + currentNewsId);
|
||||
this.newsDetail = res.data;
|
||||
this.prevNewsId = res.data.slideshowMap.previous?.id || '';
|
||||
this.nextNewsId = res.data.slideshowMap.nextArticle?.id || '';
|
||||
} catch (error) {}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-news-detail{
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.screen1 {
|
||||
min-height: 600rem;
|
||||
}
|
||||
.screen2 {
|
||||
background-color: #ffffff;
|
||||
padding-top: 135rem;
|
||||
padding-bottom: 90rem;
|
||||
}
|
||||
.screen2 .news-title {
|
||||
text-align: center;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 30rem;
|
||||
color: #111111;
|
||||
line-height: 36rem;
|
||||
}
|
||||
.screen2 .news-info {
|
||||
height: 58rem;
|
||||
padding-top: 50rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1rem solid #999999;
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16rem;
|
||||
color: #999999;
|
||||
line-height: 36rem;
|
||||
}
|
||||
.screen2 .news-content {
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-weight: 400;
|
||||
font-size: 18rem;
|
||||
color: #111111;
|
||||
line-height: 36rem;
|
||||
margin-top: 30rem;
|
||||
}
|
||||
.screen2 .news-content >>> p {
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
.screen3 {
|
||||
height: auto;
|
||||
display: flex;
|
||||
padding: 10rem;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.screen3 .title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 24rem;
|
||||
line-height: 88rem;
|
||||
color: #141414;
|
||||
}
|
||||
.screen3 .news-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.screen3 .news-item {
|
||||
width: 430rem;
|
||||
height: 505rem;
|
||||
border-radius: 10rem;
|
||||
background-color: #ffffff;
|
||||
box-shadow: rgba(28, 28, 30, 0.05) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.05) 0rem 8rem 16rem 0rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 60rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.screen3 .news-item:not(:nth-of-type(3n)) {
|
||||
margin-right: calc((1400rem - 430rem * 3) / 2);
|
||||
}
|
||||
.screen3 .news-item:hover {
|
||||
box-shadow: rgba(28, 28, 30, 0.1) 0rem 0rem 2rem 0rem, rgba(28, 28, 30, 0.1) 0rem 8rem 16rem 0rem;
|
||||
z-index: 10;
|
||||
}
|
||||
.screen3 .news-cover {
|
||||
width: 510rem;
|
||||
height: 302rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.screen3 .news-cover img {
|
||||
transition: transform 0.4s;
|
||||
width: 100%;
|
||||
}
|
||||
.screen3 .news-cover:hover img {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
.screen3 .news-info {
|
||||
padding: 55rem 35rem 0;
|
||||
}
|
||||
.screen3 .news-info .title {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 16rem;
|
||||
line-height: 16rem;
|
||||
color: #000000;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 16rem;
|
||||
}
|
||||
.screen3 .news-info .abstracts {
|
||||
font-family: MicrosoftYaHei;
|
||||
font-weight: 400;
|
||||
font-size: 12rem;
|
||||
line-height: 14rem;
|
||||
color: #666666;
|
||||
margin-bottom: 20rem;
|
||||
}
|
||||
.screen3 .news-info .date {
|
||||
font-family: MicrosoftYaHeiLight;
|
||||
font-weight: 400;
|
||||
font-size: 12rem;
|
||||
line-height: 12rem;
|
||||
color: #666666;
|
||||
}
|
||||
.ql-editor {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.news-content >>> .ql-align-center {
|
||||
width: 100%;
|
||||
}
|
||||
.news-content >>> .ql-align-center img {
|
||||
width: 100%!important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -185,15 +185,25 @@ export default {
|
|||
baseSite: '',
|
||||
releaseState: '1',
|
||||
},
|
||||
// locationOptions: [
|
||||
// {
|
||||
// label: '国内',
|
||||
// children: [{ label: '北京' }, { label: '上海' }],
|
||||
// },
|
||||
// {
|
||||
// label: '国外',
|
||||
// children: [{ label: '中东' }],
|
||||
// },
|
||||
// ],
|
||||
locationOptions: [
|
||||
{
|
||||
label: '国内',
|
||||
children: [{ label: '北京' }, { label: '上海' }],
|
||||
},
|
||||
{
|
||||
label: '国外',
|
||||
children: [{ label: '中东' }],
|
||||
children: [{ label: '北京' }, { label: '上海' }, { label: '广州' }],
|
||||
},
|
||||
// {
|
||||
// label: '国外',
|
||||
// children: [{ label: '中东' }],
|
||||
// },
|
||||
],
|
||||
recruitData: [],
|
||||
total: 0,
|
||||
|
|
@ -238,7 +248,7 @@ export default {
|
|||
try {
|
||||
const res = await this.$request.get(
|
||||
'/official/index/list',
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '加入我们/社会招聘/banner' } },
|
||||
{ params: { pageNum: 1, pageSize: 1, captionName: '人才招募/招募信息/banner' } },
|
||||
);
|
||||
this.screen1.bannerUrl = res.rows[0].imageurl;
|
||||
} catch (error) {}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user