yujialong 6 months ago
parent 6a2dd7ce78
commit d6c7ff0402
  1. BIN
      src/assets/images/about-bg.png
  2. 19
      src/components/menuTree/index.vue
  3. 132
      src/layouts/footer/index.vue
  4. 64
      src/layouts/header/index.vue
  5. 4
      src/layouts/home/index.vue
  6. 62
      src/layouts/navbar/index.vue
  7. 15
      src/mixins/page/index.js
  8. 380
      src/pages/aboutUs/index.vue
  9. 61
      src/pages/article/index.vue
  10. 416
      src/pages/column/index.vue
  11. 303
      src/pages/home/index.vue
  12. 252
      src/pages/index/list/index.vue
  13. 246
      src/pages/index/show/index.vue

Binary file not shown.

Before

Width:  |  Height:  |  Size: 695 KiB

After

Width:  |  Height:  |  Size: 633 KiB

@ -1,26 +1,19 @@
<template> <template>
<div class="menu-child"> <div class="menu-child">
<template v-for="item in this.menuList"> <template v-for="item in this.menuList">
<el-submenu :popper-class="site == 2 && $store.getters.getModelType ? 'iasf-menu-popup' : ''" <el-submenu :popper-class="$store.getters.getModelType ? 'iasf-menu-popup' : isHome ? 'home-menu-popup' : ''"
:class="{active: $route.query.id == item.id}" :class="{ active: $route.query.id == item.id }" :key="item.id" :index="String(item.id)" :id="item.id"
:key="item.id"
:index="String(item.id)"
:id="item.id"
v-if="item.children && item.children.length && item.children.find(i => i.menuVisible !== 1)"> v-if="item.children && item.children.length && item.children.find(i => i.menuVisible !== 1)">
<template slot="title"> <template slot="title">
<span slot="title" <span slot="title" :id="item.id">{{ item.columnName }}</span>
:id="item.id">{{item.columnName}}</span>
</template> </template>
<menuTree :menuList="item.children"></menuTree> <menuTree :menuList="item.children"></menuTree>
</el-submenu> </el-submenu>
<template v-else> <template v-else>
<template v-if="item.menuVisible !== 1"> <template v-if="item.menuVisible !== 1">
<el-menu-item :key="item.id" <el-menu-item :key="item.id" :id="item.id" :index="String(item.id)"
:id="item.id"
:index="String(item.id)"
:class="{ active: $route.query.id == item.id }"> :class="{ active: $route.query.id == item.id }">
<span slot="title" <span slot="title" :id="item.id">{{ item.columnName }}</span>
:id="item.id">{{item.columnName}}</span>
</el-menu-item> </el-menu-item>
</template> </template>
</template> </template>
@ -63,6 +56,7 @@ export default {
background-color: transparent !important; background-color: transparent !important;
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.menu-child { .menu-child {
/deep/ .el-menu-item { /deep/ .el-menu-item {
@ -81,6 +75,7 @@ export default {
&:focus-visible { &:focus-visible {
outline: none; outline: none;
} }
/deep/ .el-submenu__title { /deep/ .el-submenu__title {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;

@ -1,82 +1,58 @@
<template> <template>
<div> <div>
<div v-if="showDefaultPath.includes($route.path)" <div v-if="showDefaultPath.includes($route.path)" :class="['footer', { iasf: isIasf }]">
:class="['footer', {iasf: isIasf}]">
<template v-if="isIasf"> <template v-if="isIasf">
<div class="mask"></div> <div class="mask"></div>
<ul v-if="isIasf" <ul v-if="isIasf" class="entry">
class="entry"> <li :class="{ 'cursor-pointer': isLink(modules[13].form.link.linkName) }" @click="openLink(modules[14].form)">
<li :class="{'cursor-pointer': isLink(modules[13].form.link.linkName)}" <img class="icon" :src="modules[14].form.pic" alt="">
@click="openLink(modules[14].form)">
<img class="icon"
:src="modules[14].form.pic"
alt="">
<p class="text">{{ modules[14].form.title }}</p> <p class="text">{{ modules[14].form.title }}</p>
</li> </li>
<li :class="{'cursor-pointer': isLink(modules[14].form.link.linkName)}" <li :class="{ 'cursor-pointer': isLink(modules[14].form.link.linkName) }" @click="openLink(modules[15].form)">
@click="openLink(modules[15].form)"> <img class="icon" :src="modules[15].form.pic" alt="">
<img class="icon"
:src="modules[15].form.pic"
alt="">
<p class="text">{{ modules[15].form.title }}</p> <p class="text">{{ modules[15].form.title }}</p>
</li> </li>
<li :class="{'cursor-pointer': isLink(modules[15].form.link.linkName)}" <li :class="{ 'cursor-pointer': isLink(modules[15].form.link.linkName) }" @click="openLink(modules[16].form)">
@click="openLink(modules[16].form)"> <img class="icon" :src="modules[16].form.pic" alt="">
<img class="icon"
:src="modules[16].form.pic"
alt="">
<p class="text">{{ modules[16].form.title }}</p> <p class="text">{{ modules[16].form.title }}</p>
</li> </li>
<li :class="{'cursor-pointer': isLink(modules[16].form.link.linkName)}" <li :class="{ 'cursor-pointer': isLink(modules[16].form.link.linkName) }" @click="openLink(modules[17].form)">
@click="openLink(modules[17].form)"> <img class="icon" :src="modules[17].form.pic" alt="">
<img class="icon"
:src="modules[17].form.pic"
alt="">
<p class="text">{{ modules[17].form.title }}</p> <p class="text">{{ modules[17].form.title }}</p>
</li> </li>
<li :class="{'cursor-pointer': isLink(modules[17].form.link.linkName)}" <li :class="{ 'cursor-pointer': isLink(modules[17].form.link.linkName) }" @click="openLink(modules[18].form)">
@click="openLink(modules[18].form)"> <img class="icon" :src="modules[18].form.pic" alt="">
<img class="icon"
:src="modules[18].form.pic"
alt="">
<p class="text">{{ modules[18].form.title }}</p> <p class="text">{{ modules[18].form.title }}</p>
</li> </li>
</ul> </ul>
</template> </template>
<div class="relative"> <div class="relative text-center">
<div class="info"> <img src="https://huorantech.com/images/about/logo.png" alt="">
<div class="leftBox"> <div class="flex j-center a-center m-t-20">
<p class="meta">Copyright ©2002- 2021</p> <div class="flex">
<p class="meta">Institute of Advanced Science Facilities, ShenzhenIASF</p> <div v-for="(item, i) in columns" :key="i" class="column">
<p class="meta">Tel400-0010-998</p>
</div>
<div v-for="(item, i) in columns"
:key="i"
class="column">
<h6 @click="columnTo(item)">{{ item.columnName }}</h6> <h6 @click="columnTo(item)">{{ item.columnName }}</h6>
<ul v-if="item.children.length" <ul v-if="item.children.length" class="children">
class="children"> <li v-for="(column, j) in item.children" :key="j" @click="columnTo(column)">{{ column.columnName }}</li>
<li v-for="(column, j) in item.children"
:key="j"
@click="columnTo(column)">{{ column.columnName }}</li>
</ul> </ul>
</div> </div>
</div> </div>
<a class="copyright">粤ICP备2020131940号 粤公安网34565432456765432号</a> </div>
<div class="text-center">
<p class="meta">广东省深圳市龙华区民治街道红山社区龙光玖钻商务中心南期A座2311</p>
<a class="copyright" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a>
</div>
</div> </div>
</div> </div>
<div v-if="showContactPath.includes($route.path)" <div v-if="showContactPath.includes($route.path)" class="contact">
class="contact">
<div class="inner"> <div class="inner">
<div class="title"> <div class="title">
<h6>Contact us</h6> <h6>Contact us</h6>
<p class="text">CONTACT US</p> <p class="text">CONTACT US</p>
</div> </div>
<div class="region"> <div class="region">
<img class="dot" <img class="dot" src="@/assets/images/dot.png" alt="">
src="@/assets/images/dot.png"
alt="">
<p class="name">Shenzhen</p> <p class="name">Shenzhen</p>
</div> </div>
<div class="info"> <div class="info">
@ -86,22 +62,17 @@
<div class="texts"> <div class="texts">
<div class="lines"> <div class="lines">
<div class="line"> <div class="line">
<img class="icon" <img class="icon" src="@/assets/images/mail.png" alt="">
src="@/assets/images/mail.png"
alt="">
Email: {{ isSfel ? 'fel@mail.iasf.ac.cn' : 'std@mail.iasf.ac.cn' }} Email: {{ isSfel ? 'fel@mail.iasf.ac.cn' : 'std@mail.iasf.ac.cn' }}
</div> </div>
<div class="line"> <div class="line">
<img class="icon" <img class="icon" src="@/assets/images/tel.png" alt="">
src="@/assets/images/tel.png"
alt="">
Telephone: {{ isSfel ? '0755-21096052' : '0086-755-21096026' }} Telephone: {{ isSfel ? '0755-21096052' : '0086-755-21096026' }}
</div> </div>
<div class="line"> <div class="line">
<img class="icon" <img class="icon" src="@/assets/images/address.png" alt="">
src="@/assets/images/address.png" Address: {{ isSfel ? '自由电子激光工程经理部' :
alt=""> '268 Zhenyuan St, Building A3, Floor 3-6, Guangming District, Shenzhen, Guangdong, P.R.China' }}
Address: {{ isSfel ? '自由电子激光工程经理部' : '268 Zhenyuan St, Building A3, Floor 3-6, Guangming District, Shenzhen, Guangdong, P.R.China' }}
</div> </div>
</div> </div>
<div class="qrcode"> <div class="qrcode">
@ -244,24 +215,25 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.leftBox {
margin-right: 100px;
}
.footer { .footer {
position: relative; position: relative;
padding: 64px 20% 25px; padding: 48px 20% 25px;
color: #fff; color: #fff;
background-color: #091733; background-color: #091733;
overflow: hidden; overflow: hidden;
.info { .info {
display: flex; display: flex;
} }
.meta { .meta {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 14px; font-size: 14px;
} }
.column { .column {
margin: 0 20px; margin: 0 20px;
h6 { h6 {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 16px; font-size: 16px;
@ -269,6 +241,7 @@ export default {
cursor: pointer; cursor: pointer;
} }
} }
.children { .children {
li { li {
margin: 12px 0; margin: 12px 0;
@ -278,19 +251,23 @@ export default {
cursor: pointer; cursor: pointer;
} }
} }
.copyright { .copyright {
font-size: 14px; font-size: 14px;
color: #6d7384; color: #6d7384;
} }
&.iasf { &.iasf {
padding-top: 50px; padding-top: 50px;
background: url(http://10.10.11.7/images/iasf/footer.jpg) 0 -400px/100% auto no-repeat; background: url(http://10.10.11.7/images/iasf/footer.jpg) 0 -400px/100% auto no-repeat;
background-color: #091733; background-color: #091733;
.children { .children {
li { li {
color: #fff; color: #fff;
} }
} }
.mask { .mask {
position: absolute; position: absolute;
top: 0; top: 0;
@ -301,11 +278,13 @@ export default {
} }
} }
} }
.entry { .entry {
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 100px; margin-bottom: 100px;
li { li {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@ -313,9 +292,11 @@ export default {
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
img { img {
max-width: 100px; max-width: 100px;
} }
.text { .text {
margin-top: 15px; margin-top: 15px;
font-size: 1rem; font-size: 1rem;
@ -323,19 +304,23 @@ export default {
color: #fff; color: #fff;
} }
} }
.contact { .contact {
position: relative; position: relative;
padding: 0 0 73px 0; padding: 0 0 73px 0;
background: url(../../assets/images/map.png) 0 0 / cover no-repeat; background: url(../../assets/images/map.png) 0 0 / cover no-repeat;
.inner { .inner {
width: 1082px; width: 1082px;
margin: 0 auto; margin: 0 auto;
} }
.title { .title {
width: 419px; width: 419px;
height: 263px; height: 263px;
padding: 147px 0 0 40px; padding: 147px 0 0 40px;
background-color: #0854fe; background-color: #0854fe;
h6 { h6 {
z-index: 2; z-index: 2;
position: relative; position: relative;
@ -345,6 +330,7 @@ export default {
font-weight: 600; font-weight: 600;
color: #fff; color: #fff;
} }
.text { .text {
margin-top: -65px; margin-top: -65px;
font-size: 48px; font-size: 48px;
@ -352,6 +338,7 @@ export default {
-webkit-text-stroke: 1px #4073e5; -webkit-text-stroke: 1px #4073e5;
} }
} }
.region { .region {
position: absolute; position: absolute;
top: 152px; top: 152px;
@ -360,33 +347,41 @@ export default {
align-items: center; align-items: center;
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
img { img {
margin-right: 20px; margin-right: 20px;
} }
} }
.info { .info {
margin: 55px 0 0 8px; margin: 55px 0 0 8px;
.texts { .texts {
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 24px; margin-top: 24px;
} }
.item { .item {
margin-right: 75px; margin-right: 75px;
} }
.line { .line {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
img { img {
margin-right: 8px; margin-right: 8px;
} }
} }
} }
.qrcode { .qrcode {
text-align: center; text-align: center;
.text { .text {
margin-top: 10px; margin-top: 10px;
font-size: 12px; font-size: 12px;
@ -394,37 +389,46 @@ export default {
} }
} }
} }
@media (max-width: 1500px) { @media (max-width: 1500px) {
.footer { .footer {
padding: 64px 10% 25px; padding: 64px 10% 25px;
} }
} }
@media (max-width: 1350px) { @media (max-width: 1350px) {
.inner { .inner {
width: 100% !important; width: 100% !important;
.title { .title {
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
.region { .region {
top: 300px; top: 300px;
left: 50%; left: 50%;
} }
.info { .info {
margin-top: 90px; margin-top: 90px;
} }
} }
.footer { .footer {
.info { .info {
flex-direction: column; flex-direction: column;
.column { .column {
margin-top: 20px; margin-top: 20px;
margin-left: 0; margin-left: 0;
} }
} }
} }
.entry { .entry {
flex-direction: column; flex-direction: column;
li { li {
margin-bottom: 30px; margin-bottom: 30px;
} }

@ -1,47 +1,30 @@
<template> <template>
<div :class="['header', { estate: isEstate, iasf: isIasf }]"> <div :class="['header', { channel: isHome, estate: isEstate, iasf: isIasf }]">
<a class="logo" <a class="logo" @click="toIndex">
@click="toIndex">
<template v-if="GTA"> <template v-if="GTA">
<img src="@/assets/images/logo2.png" <img src="@/assets/images/logo2.png" alt="">
alt="">
产业学院平台 产业学院平台
</template> </template>
<img v-else <img v-else src="@/assets/images/logo.png" alt="">
src="@/assets/images/logo.png"
alt="">
</a> </a>
<!-- pc端 --> <!-- pc端 -->
<template v-if="$store.getters.getModelType"> <template v-if="$store.getters.getModelType">
<navbar v-if="navShow" <navbar v-if="navShow" ref="nav" :isHome.sync="isHome" :isEstate.sync="isEstate" :isIasf.sync="isIasf"
ref="nav"
:isHome.sync="isHome"
:isEstate.sync="isEstate"
:isIasf.sync="isIasf"
@showMoreBtns="updateBtnsType"></navbar> @showMoreBtns="updateBtnsType"></navbar>
<div class="tools"> <div class="tools">
<div class="login" <div class="login" @click="toLogin">
@click="toLogin"> <img src="@/assets/images/user.png" alt="">
<img src="@/assets/images/user.png"
alt="">
<span>注册登录</span> <span>注册登录</span>
</div> </div>
</div> </div>
</template> </template>
<!-- 手机端 --> <!-- 手机端 -->
<div v-else <div v-else class="mobile-tools">
class="mobile-tools"> <i class="login el-icon-user-solid" @click="toLogin"></i>
<i class="login el-icon-user-solid" <i class="menu-icon" :class="modelType ? 'el-icon-s-fold' : 'el-icon-s-unfold'" @click.stop="updateModelType"></i>
@click="toLogin"></i> <div class="contentBox" v-show="modelType">
<i class="menu-icon" <navbar ref="nav" :isHome.sync="isHome" @updateModelType="updateType"></navbar>
:class="modelType ? 'el-icon-s-fold': 'el-icon-s-unfold' "
@click.stop="updateModelType"></i>
<div class="contentBox"
v-show="modelType">
<navbar ref="nav"
:isHome.sync="isHome"
@updateModelType="updateType"></navbar>
</div> </div>
</div> </div>
@ -187,6 +170,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$height: 90px; $height: 90px;
.header { .header {
z-index: 10; z-index: 10;
position: fixed; position: fixed;
@ -198,13 +182,16 @@ $height: 90px;
width: 100%; width: 100%;
height: $height; height: $height;
padding: 0 5% 0 5%; padding: 0 5% 0 5%;
&:not(.channel) { &:not(.channel) {
background-color: #fff; background-color: #fff;
border-bottom: 1px solid #f7f7f7; border-bottom: 1px solid #f7f7f7;
} }
&.estate { &.estate {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
} }
.logo { .logo {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -212,18 +199,22 @@ $height: 90px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
img { img {
width: 150px; width: 150px;
} }
} }
.tools { .tools {
.login { .login {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: 0.9; opacity: 0.9;
} }
span { span {
margin-left: 5px; margin-left: 5px;
color: #666; color: #666;
@ -231,18 +222,22 @@ $height: 90px;
} }
} }
} }
.search { .search {
margin-right: 43px; margin-right: 43px;
} }
.mobile-tools { .mobile-tools {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
.login { .login {
font-size: 1.5rem; font-size: 1.5rem;
color: #c1c1c1; color: #c1c1c1;
cursor: pointer; cursor: pointer;
} }
} }
.menu-icon { .menu-icon {
margin-left: 10px; margin-left: 10px;
font-size: 1.8rem; font-size: 1.8rem;
@ -250,6 +245,7 @@ $height: 90px;
cursor: pointer; cursor: pointer;
} }
} }
.search-wrap { .search-wrap {
position: absolute; position: absolute;
top: 67px; top: 67px;
@ -259,6 +255,7 @@ $height: 90px;
padding: 10px 15px 10px 10px; padding: 10px 15px 10px 10px;
background-color: #fff; background-color: #fff;
box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.3);
input { input {
width: 300px; width: 300px;
height: 40px; height: 40px;
@ -270,22 +267,26 @@ $height: 90px;
border-radius: 4px; border-radius: 4px;
outline: none; outline: none;
} }
.search-icon { .search-icon {
padding-right: 15px; padding-right: 15px;
margin: 0 15px; margin: 0 15px;
cursor: pointer; cursor: pointer;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
} }
.close-icon { .close-icon {
font-size: 2rem; font-size: 2rem;
cursor: pointer; cursor: pointer;
} }
} }
.menu-child { .menu-child {
/deep/ .el-submenu__title { /deep/ .el-submenu__title {
font-size: 1rem; font-size: 1rem;
} }
} }
.contentBox { .contentBox {
width: 100%; width: 100%;
position: absolute; position: absolute;
@ -296,14 +297,17 @@ $height: 90px;
max-height: 30rem; max-height: 30rem;
overflow-y: scroll; overflow-y: scroll;
} }
@media (max-width: 1660px) { @media (max-width: 1660px) {
.header { .header {
.logo { .logo {
left: 10px; left: 10px;
} }
.search { .search {
margin-right: 20px !important; margin-right: 20px !important;
} }
.tools { .tools {
right: 30px; right: 30px;
} }
@ -315,10 +319,12 @@ $height: 90px;
color: black !important; color: black !important;
background-color: #fff; background-color: #fff;
} }
.search-wrap { .search-wrap {
right: 10px; right: 10px;
top: 0; top: 0;
width: 70%; width: 70%;
input { input {
width: 15rem; width: 15rem;
padding: 0 0.5rem 0 0.1rem; padding: 0 0.5rem 0 0.1rem;

@ -2,8 +2,7 @@
<div :class="['main', { channel: isHome, 'site-en': handleClass() }]"> <div :class="['main', { channel: isHome, 'site-en': handleClass() }]">
<v-head ref="header"></v-head> <v-head ref="header"></v-head>
<div class="layout"> <div class="layout">
<transition name="move" <transition name="move" mode="out-in">
mode="out-in">
<router-view class="view"></router-view> <router-view class="view"></router-view>
</transition> </transition>
<el-backtop target=".layout"></el-backtop> <el-backtop target=".layout"></el-backtop>
@ -78,6 +77,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.main:not(.channel) { .main:not(.channel) {
min-height: calc(100% - 90px); min-height: calc(100% - 90px);
.layout { .layout {
padding-top: 90px; padding-top: 90px;
} }

@ -1,19 +1,12 @@
<template> <template>
<div> <div>
<el-menu :class="['nav', {estate: isEstate,changing: !showMenu}]" <el-menu :class="['nav', { home: isHome, estate: isEstate, changing: !showMenu }]" ref="elMenu" :key="menuRefresh"
ref="elMenu" :mode="$store.getters.getModelType ? 'horizontal' : 'vertical'" :background-color="bgColor"
:key="menuRefresh" :text-color="textColor" :active-text-color="activeTextColor" @open="jump" @select="jump"
:mode="$store.getters.getModelType ? 'horizontal' : 'vertical' "
:background-color="bgColor"
:text-color="textColor"
:active-text-color="activeTextColor"
@open="jump"
@select="jump"
:default-active="String(active)"> :default-active="String(active)">
<menuTree :menuList="menus" /> <menuTree :menuList="menus" />
<el-submenu :popper-class="site == 2 && $store.getters.getModelType ? 'iasf-menu-popup' : ''" <el-submenu :popper-class="$store.getters.getModelType ? 'iasf-menu-popup' : isHome ? 'home-menu-popup' : ''"
v-show="showMoreBtns" v-show="showMoreBtns" index="522222">
index="522222">
<template slot="title"> <template slot="title">
<div class="moreBtns">{{ $t('column.more') }}</div> <div class="moreBtns">{{ $t('column.more') }}</div>
</template> </template>
@ -30,7 +23,7 @@ import mixins from '@/mixins/article'
import { mapMutations, mapGetters } from 'vuex' import { mapMutations, mapGetters } from 'vuex'
import Setting from '@/setting' import Setting from '@/setting'
export default { export default {
props: ['isEstate', 'isIasf'], props: ['isHome', 'isEstate', 'isIasf'],
mixins: [mixins], mixins: [mixins],
data () { data () {
return { return {
@ -65,12 +58,18 @@ export default {
this.getColumn() this.getColumn()
this.setSite(siteId) this.setSite(siteId)
} }
this.handleColor()
},
isHome () {
this.handleColor()
}, },
getNavSum () { getNavSum () {
this.getColumn() this.getColumn()
} }
}, },
mounted () { mounted () {
this.lastHome = this.isHome
this.handleColor()
this.getColumn() this.getColumn()
}, },
methods: { methods: {
@ -120,6 +119,19 @@ export default {
} }
}).catch(err => { }) }).catch(err => { })
}, },
//
handleColor () {
const home = this.isHome
if (this.lastHome !== home) this.showMenu = false
this.bgColor = home ? 'transparent' : '#fff'
this.lastHome !== home && this.$nextTick(() => {
setTimeout(() => {
this.showMenu = true
}, 200)
})
this.lastHome = home
// this.menuRefresh++
},
// //
getPath (data, id) { getPath (data, id) {
for (const e of data) { for (const e of data) {
@ -146,14 +158,17 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
$height: 90px; $height: 90px;
.moreBtns { .moreBtns {
font-size: 1rem; font-size: 1rem;
font-weight: bold; font-weight: bold;
padding-top: 0.2rem; padding-top: 0.2rem;
} }
.changing { .changing {
opacity: 0; opacity: 0;
} }
/deep/.nav.el-menu--horizontal { /deep/.nav.el-menu--horizontal {
display: flex; display: flex;
position: absolute; position: absolute;
@ -162,60 +177,75 @@ $height: 90px;
transform: translateX(-50%); transform: translateX(-50%);
border: 0; border: 0;
outline: none; outline: none;
.el-menu-item, .el-menu-item,
.el-submenu__title { .el-submenu__title {
height: $height; height: $height;
line-height: $height; line-height: $height;
span { span {
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
} }
&:hover { &:hover {
background-color: transparent !important; background-color: transparent !important;
span { span {
color: #1583ff; color: #499eff;
} }
} }
} }
.el-submenu__title { .el-submenu__title {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.menu-child { .menu-child {
display: flex; display: flex;
} }
.el-submenu__icon-arrow { .el-submenu__icon-arrow {
position: static; position: static;
margin: 0 0 0 5px; margin: 0 0 0 5px;
color: inherit; color: inherit;
} }
.is-active { .is-active {
color: #333 !important; color: #333 !important;
} }
.active, .active,
.active .el-submenu__title { .active .el-submenu__title {
color: #1583ff !important; color: #1583ff !important;
} }
&.home { &.home {
.el-menu-item, .el-menu-item,
.el-submenu__title { .el-submenu__title {
&:hover { &:hover {
background-color: transparent !important; background-color: transparent !important;
span { span {
color: #fff; color: #499eff;
} }
} }
} }
.is-active { .is-active {
color: #f9f9f9 !important; color: #f9f9f9 !important;
} }
.active, .active,
.active .el-submenu__title { .active .el-submenu__title {
color: #fff !important; color: #1583ff !important;
} }
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
/deep/.nav { /deep/.nav {
.el-menu-item { .el-menu-item {

@ -1,10 +1,10 @@
import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
export default { export default {
data () { data () {
return { return {
id: this.$route.query.id, id: this.$route.query.id,
preview: this.$route.query.preview, preview: this.$route.query.preview,
listPreview: this.$route.query.listPreview,
modules: [], modules: [],
articles: [] articles: []
} }
@ -15,9 +15,20 @@ export default {
} }
}, },
mounted () { mounted () {
this.getInfo && this.$route.query.id && this.getInfo() this.getInfo && this.$route.query.id && this.init()
}, },
methods: { methods: {
// 初始化
async init () {
// 预览直接可以看长页
if (this.listPreview || this.preview) {
this.getInfo()
} else {
// 前台正常进入长页,则需要先判断该长页的导航菜单字段是否被禁用
const { data } = await this.$post(`${this.api.findColumn}?id=${this.id}`)
data.menuVisible || this.getInfo()
}
},
// 打开链接 // 打开链接
async openLink (item) { async openLink (item) {
const { link } = item const { link } = item

File diff suppressed because it is too large Load Diff

@ -1,42 +1,35 @@
<template> <template>
<div v-show="loaded" <div v-show="loaded" class="wrap">
class="wrap">
<!-- 人物详情不展示banner --> <!-- 人物详情不展示banner -->
<div v-if="form.articleTemplate !== 23 && !isPeople" <div v-if="form.articleTemplate !== 23 && !isPeople" class="banner"
class="banner"
:style="{ backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : '' }"> :style="{ backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : '' }">
{{ form.columnName }} {{ form.columnName }}
</div> </div>
<div class="content"> <div class="content">
<Breadcrumb ref="breadcrumb" <Breadcrumb ref="breadcrumb" :data.sync="routes" />
:data.sync="routes" />
<div class="article"> <div class="article">
<div class="left"> <div class="left">
<template v-if="!isPeople"> <template v-if="!isPeople">
<h2>{{ form.title }}</h2> <h2>{{ form.title }}</h2>
<div class="meta">{{ form.source && form.source + ' | ' }} {{ form.author && form.author + ' | ' }} {{ form.releaseTime }}</div> <div class="meta">{{ form.source && form.source + ' | ' }} {{ form.author && form.author + ' | ' }} {{
<div class="meta">{{ form.edit && $t('column.edit') + ':' + form.edit }} {{ form.audit && ' | ' + $t('column.auditor') + ':' + form.audit }} {{ form.label && ' | ' + $t('column.label') + ':' + form.label }}</div> form.releaseTime }}</div>
<div class="meta">{{ form.edit && $t('column.edit') + ':' + form.edit }} {{ form.audit && ' | ' +
$t('column.auditor') + ':' + form.audit }} {{ form.label && ' | ' + $t('column.label') + ':' + form.label
}}</div>
</template> </template>
<p v-if="form.summary" <p v-if="form.summary" class="brief">{{ form.summary }}</p>
class="brief">{{ form.summary }}</p> <div class="des" id="mainBody" v-html="form.mainBody"></div>
<div class="des" <div v-if="form.fileList && form.fileList.length" class="annex">
id="mainBody"
v-html="form.mainBody"></div>
<div v-if="form.fileList && form.fileList.length"
class="annex">
<h6>{{ $t('column.attachmentDownload') }}</h6> <h6>{{ $t('column.attachmentDownload') }}</h6>
<ul class="files"> <ul class="files">
<li v-for="(file, i) in form.fileList" <li v-for="(file, i) in form.fileList" :key="i">
:key="i">
<span class="name">{{ file.fileName }}</span> <span class="name">{{ file.fileName }}</span>
<span class="download" <span class="download" @click="download(file)">{{ $t('column.download') }}</span>
@click="download(file)">{{$t('column.download')}}</span>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<RightColumns ref="right" <RightColumns ref="right" :party="isParty" />
:party="isParty" />
</div> </div>
</div> </div>
</div> </div>
@ -189,12 +182,15 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import './editor.css'; @import './editor.css';
.content { .content {
width: 1200px; width: 1200px;
/deep/ .el-breadcrumb { /deep/ .el-breadcrumb {
font-size: 0.98rem; font-size: 0.98rem;
} }
} }
.banner { .banner {
display: flex; display: flex;
align-items: center; align-items: center;
@ -206,21 +202,26 @@ export default {
background: url(../../assets/images/intro-bg.png) center center/cover no-repeat; background: url(../../assets/images/intro-bg.png) center center/cover no-repeat;
object-fit: cover; object-fit: cover;
} }
.article { .article {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.left { .left {
width: 70%; width: 70%;
} }
h2 { h2 {
font-size: 1.9rem; font-size: 1.9rem;
color: #1c1c1c; color: #1c1c1c;
} }
.meta { .meta {
margin: 1rem 0; margin: 1rem 0;
font-size: 0.88rem; font-size: 0.88rem;
color: #9b9b9b; color: #9b9b9b;
} }
.brief { .brief {
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
margin: 1rem 0; margin: 1rem 0;
@ -229,6 +230,7 @@ export default {
color: #606060; color: #606060;
border-bottom: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;
} }
/deep/.des { /deep/.des {
// width: 100%; // width: 100%;
// overflow: auto; // overflow: auto;
@ -236,27 +238,34 @@ export default {
color: rgb(0, 0, 238); color: rgb(0, 0, 238);
word-wrap: break-word; word-wrap: break-word;
} }
img { img {
max-width: 100%; max-width: 100%;
object-fit: cover; object-fit: cover;
} }
ul { ul {
// padding-left: 40px; // padding-left: 40px;
list-style: disc; list-style: disc;
li { li {
list-style: inherit; list-style: inherit;
} }
} }
ol { ol {
// padding-left: 40px; // padding-left: 40px;
list-style: decimal; list-style: decimal;
li { li {
list-style: inherit; list-style: inherit;
} }
} }
} }
.annex { .annex {
margin-top: 30px; margin-top: 30px;
h6 { h6 {
padding-left: 8px; padding-left: 8px;
margin-bottom: 20px; margin-bottom: 20px;
@ -267,15 +276,18 @@ export default {
color: #333; color: #333;
border-left: 4px solid #1583ff; border-left: 4px solid #1583ff;
} }
li { li {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
} }
.name { .name {
margin-right: 8px; margin-right: 8px;
font-size: 14px; font-size: 14px;
} }
.download { .download {
color: #1583ff; color: #1583ff;
cursor: pointer; cursor: pointer;
@ -288,6 +300,7 @@ export default {
width: 98%; width: 98%;
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.article { .article {
/deep/.des { /deep/.des {
@ -297,19 +310,24 @@ export default {
} }
} }
} }
.banner { .banner {
font-size: 1.5rem; font-size: 1.5rem;
} }
.article { .article {
flex-direction: column; flex-direction: column;
.left { .left {
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
h2 { h2 {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
.article { .article {
.des { .des {
img { img {
@ -317,6 +335,7 @@ export default {
} }
} }
} }
.right { .right {
width: 100%; width: 100%;
} }

@ -1,11 +1,8 @@
<template> <template>
<div v-show="loaded" <div v-show="loaded" v-loading="loading"
:class="['wrap', { activity: info.listStyleId === 15, party: info.listStyleId === 68 }]"> :class="['wrap', { activity: info.listStyleId === 15, party: info.listStyleId === 68 }]">
<div class="banner fadeInUp"> <div class="banner fadeInUp">
<img width="100%" <img width="100%" height="280" :src="info.columnBanner" alt="" />
height="280"
:src="info.columnBanner"
alt="" />
<div class="texts"> <div class="texts">
<p class="text">{{ info.columnName }}</p> <p class="text">{{ info.columnName }}</p>
<p class="sub">{{ info.subtitle }}</p> <p class="sub">{{ info.subtitle }}</p>
@ -15,37 +12,24 @@
<div class="article"> <div class="article">
<div class="left"> <div class="left">
<!-- 文章侧边栏+搜索+新闻列表 --> <!-- 文章侧边栏+搜索+新闻列表 -->
<div v-if="info.listStyleId === 10" <div v-if="info.listStyleId === 10" class="forms">
class="forms">
<div class="item"> <div class="item">
<span class="label">{{ $t('column.classification') }}</span> <span class="label">{{ $t('column.classification') }}</span>
<el-select v-model="form.classificationId" <el-select v-model="form.classificationId" @change="filter">
@change="filter"> <el-option :label="$t('column.all')" :value="null"></el-option>
<el-option :label="$t('column.all')" <el-option v-for="item in classifications" :key="item.id" :label="item.classificationName"
:value="null"></el-option>
<el-option v-for="item in classifications"
:key="item.id"
:label="item.classificationName"
:value="item.id"> :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="item"> <div class="item">
<span class="label">{{ $t('column.label') }}</span> <span class="label">{{ $t('column.label') }}</span>
<el-select ref="search" <el-select ref="search" v-model="lableId" multiple @change="filter">
v-model="lableId" <el-option v-for="item in labels" :key="item.id" :label="item.labelName" :value="item.id"> </el-option>
multiple
@change="filter">
<el-option v-for="item in labels"
:key="item.id"
:label="item.labelName"
:value="item.id"> </el-option>
</el-select> </el-select>
</div> </div>
<div class="search"> <div class="search">
<input type="text" <input type="text" :placeholder="$t('column.titlePlaceholder')" v-model="form.title" />
:placeholder="$t('column.titlePlaceholder')"
v-model="form.title" />
<!-- <i class="icon"> <!-- <i class="icon">
<img src="@/assets/images/search-white.png" alt="" /> <img src="@/assets/images/search-white.png" alt="" />
@ -53,62 +37,42 @@
</div> </div>
</div> </div>
<!-- 侧导航+新闻列表(含文章概述) --> <!-- 侧导航+新闻列表(含文章概述) -->
<div v-if="info.listStyleId === 12" <div v-if="info.listStyleId === 12" class="forms">
class="forms">
<div class="item"> <div class="item">
<span class="label">{{ $t('column.classification') }}</span> <span class="label">{{ $t('column.classification') }}</span>
<el-select v-model="form.classificationId" <el-select v-model="form.classificationId" @change="filter">
@change="filter"> <el-option :label="$t('column.all')" :value="null"></el-option>
<el-option :label="$t('column.all')" <el-option v-for="item in classifications" :key="item.id" :label="item.classificationName"
:value="null"></el-option>
<el-option v-for="item in classifications"
:key="item.id"
:label="item.classificationName"
:value="item.id"> :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="item"> <div class="item">
<span class="label">{{ $t('column.label') }}</span> <span class="label">{{ $t('column.label') }}</span>
<el-select ref="search" <el-select ref="search" v-model="lableId" multiple @change="filter">
v-model="lableId" <el-option v-for="item in labels" :key="item.id" :label="item.labelName" :value="item.id"> </el-option>
multiple
@change="filter">
<el-option v-for="item in labels"
:key="item.id"
:label="item.labelName"
:value="item.id"> </el-option>
</el-select> </el-select>
</div> </div>
<div class="search"> <div class="search">
<input type="text" <input type="text" :placeholder="$t('column.titlePlaceholder')" v-model="form.title" />
:placeholder="$t('column.titlePlaceholder')"
v-model="form.title" />
<!-- <i class="icon"> <!-- <i class="icon">
<img src="@/assets/images/search-white.png" alt="" /> <img src="@/assets/images/search-white.png" alt="" />
</i> --> </i> -->
</div> </div>
</div> </div>
<!-- 会议活动筛选+会议活动列表 --> <!-- 会议活动筛选+会议活动列表 -->
<div v-if="info.listStyleId === 15" <div v-if="info.listStyleId === 15" class="forms">
class="forms">
<ul class="switch"> <ul class="switch">
<li v-for="(item, i) in convokeTypes" <li v-for="(item, i) in convokeTypes" :key="i" :class="{ active: item.id === form.convokeType }"
:key="i"
:class="{ active: item.id === form.convokeType }"
@click="switchChange(item)"> @click="switchChange(item)">
{{ item.name }} {{ item.name }}
</li> </li>
</ul> </ul>
<div class="item"> <div class="item">
<span class="label">{{ $t('column.classification') }}</span> <span class="label">{{ $t('column.classification') }}</span>
<el-select v-model="form.classificationId" <el-select v-model="form.classificationId" @change="filter">
@change="filter"> <el-option :label="$t('column.all')" :value="null"></el-option>
<el-option :label="$t('column.all')" <el-option v-for="item in classifications" :key="item.id" :label="item.classificationName"
:value="null"></el-option>
<el-option v-for="item in classifications"
:key="item.id"
:label="item.classificationName"
:value="item.id"> :value="item.id">
</el-option> </el-option>
</el-select> </el-select>
@ -116,48 +80,33 @@
</div> </div>
<div class="contents"> <div class="contents">
<el-tree v-if="columns.length && columns.find(e => e.children.length) && !isFilter && showNav && info.listStyleId !== 15" <el-tree
class="columns" v-if="columns.length && columns.find(e => e.children.length) && !isFilter && showNav && info.listStyleId !== 15"
ref="leftColumn" class="columns" ref="leftColumn" :data="columns" highlight-current :expand-on-click-node="false"
:data="columns" default-expand-all :props="defaultProps" node-key="id" icon-class="el-icon-arrow-down"
highlight-current @node-click="(item) => columnClick(item, 1)" @current-change="(item) => columnClick(item, 1)">
:expand-on-click-node="false" <span class="custom-tree-node" slot-scope="{ node, data }" style="padding-left: 10px;">
default-expand-all
:props="defaultProps"
node-key="id"
icon-class="el-icon-arrow-down"
@node-click="(item) => columnClick(item, 1)"
@current-change="(item) => columnClick(item, 1)">
<span class="custom-tree-node"
slot-scope="{ node, data }"
style="padding-left: 10px;">
<span :title="node.label">{{ node.label }}</span> <span :title="node.label">{{ node.label }}</span>
</span> </span>
</el-tree> </el-tree>
<template v-if="articles.length && !loading"> <template v-if="articles.length && !loading">
<!-- 列表样式选的是列表详情则直接显示最新一篇文章的详情 --> <!-- 列表样式选的是列表详情则直接显示最新一篇文章的详情 -->
<div v-if="info.listStyleId === 77" <div v-if="info.listStyleId === 77" class="detail">
class="detail">
<template v-if="article.articleTemplate != 72"> <template v-if="article.articleTemplate != 72">
<h2>{{ article.title }}</h2> <h2>{{ article.title }}</h2>
<!-- <div class="meta">{{ article.source && article.source + ' | ' }} {{ article.author && article.author + ' | ' }} {{ article.releaseTime }}</div> <!-- <div class="meta">{{ article.source && article.source + ' | ' }} {{ article.author && article.author + ' | ' }} {{ article.releaseTime }}</div>
<div class="meta">{{ article.edit && $t('column.edit') + ':' + article.edit }} {{ article.audit && ' | ' + $t('column.auditor') + ':' + article.audit }} {{ article.label && ' | ' + $t('column.label') + ':' + article.label }}</div> --> <div class="meta">{{ article.edit && $t('column.edit') + ':' + article.edit }} {{ article.audit && ' | ' + $t('column.auditor') + ':' + article.audit }} {{ article.label && ' | ' + $t('column.label') + ':' + article.label }}</div> -->
</template> </template>
<p v-if="article.summary" <p v-if="article.summary" class="brief">{{ article.summary }}</p>
class="brief">{{ article.summary }}</p> <div class="des" v-html="article.mainBody"></div>
<div class="des" <div v-if="article.fileList && article.fileList.length" class="annex">
v-html="article.mainBody"></div>
<div v-if="article.fileList && article.fileList.length"
class="annex">
<h6>{{ $t('column.attachmentDownload') }}</h6> <h6>{{ $t('column.attachmentDownload') }}</h6>
<ul class="files"> <ul class="files">
<li v-for="(file, i) in article.fileList" <li v-for="(file, i) in article.fileList" :key="i">
:key="i">
<span class="name">{{ file.fileName }}</span> <span class="name">{{ file.fileName }}</span>
<span class="download" <span class="download" @click="download(file)">{{ $t('column.download') }}</span>
@click="download(file)">{{$t('column.download')}}</span>
</li> </li>
</ul> </ul>
</div> </div>
@ -167,11 +116,8 @@
<template v-if="info.listStyleId === 12"> <template v-if="info.listStyleId === 12">
<div class="article-wrap"> <div class="article-wrap">
<ul class="articles"> <ul class="articles">
<li v-for="(item, i) in articles" <li v-for="(item, i) in articles" :key="i" :class="{ 'news-notice': info.listStyleId === 55 }"
:key="i" class="readDetail" @click="toArtice(item)">
:class="{'news-notice': info.listStyleId === 55}"
class="readDetail"
@click="toArtice(item)">
<template v-if="info.listStyleId === 55"> <template v-if="info.listStyleId === 55">
<div class="releaseTime"> <div class="releaseTime">
<p class="d">{{ item.date }}</p> <p class="d">{{ item.date }}</p>
@ -180,9 +126,7 @@
<div class="news-title">{{ item.title }}</div> <div class="news-title">{{ item.title }}</div>
</template> </template>
<template v-else> <template v-else>
<img class="pic" <img class="pic" :src="item.titleImg" alt=""
:src="item.titleImg"
alt=""
onerror="javascript:this.src='./images/1.png?id=1';" /> onerror="javascript:this.src='./images/1.png?id=1';" />
<div class="texts"> <div class="texts">
<p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName" <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
@ -192,63 +136,43 @@
<h6 class="titleDes">{{ item.title }}</h6> <h6 class="titleDes">{{ item.title }}</h6>
<template v-if="item.listStyleId === 11 || item.listStyleId == 12"> <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
<span class="meta">{{ item.releaseTime }}</span> <span class="meta">{{ item.releaseTime }}</span>
<div class="des" <div class="des" v-html="item.mainBody"></div>
v-html="item.mainBody"></div>
</template> </template>
<span v-if="item.listStyleId === 10 " <span v-if="item.listStyleId === 10" class="meta">{{ item.releaseTime }} {{ item.labelName
class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' + && ' | ' +
item.labelName }}</span> item.labelName }}</span>
<template v-if="item.listStyleId === 15 || item.listStyleId === 16"> <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
<div v-if="item.keynoteSpeaker" <div v-if="item.keynoteSpeaker" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/mine.png" alt="" /> {{ item.keynoteSpeaker }}
<img class="icon"
src="@/assets/images/mine.png"
alt="" /> {{ item.keynoteSpeaker }}
</div> </div>
<div v-if="item.activityStartTime" <div v-if="item.activityStartTime" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/time.png" alt="" />
<img class="icon"
src="@/assets/images/time.png"
alt="" />
{{ item.activityStartTime }} {{ item.activityStartTime }}
</div> </div>
<div v-if="item.offlineLocation" <div v-if="item.offlineLocation" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/location.png" alt="" /> {{ item.offlineLocation
<img class="icon" }}
src="@/assets/images/location.png"
alt="" /> {{ item.offlineLocation }}
</div> </div>
<div v-if="item.onlineLocation" <div v-if="item.onlineLocation" class="meta">
class="meta"> <img class="icon" src="@/assets/images/online.png" alt="" /> {{ item.onlineLocation }}
<img class="icon"
src="@/assets/images/online.png"
alt="" /> {{ item.onlineLocation }}
</div> </div>
</template> </template>
<el-button type="primary" <el-button type="primary" class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
</div> </div>
</template> </template>
</li> </li>
</ul> </ul>
<div v-if="articles.length" <div v-if="articles.length" class="pagination">
class="pagination"> <el-pagination background @current-change="currentChange" :current-page="page"
<el-pagination background :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
@current-change="currentChange"
:current-page="page"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total"></el-pagination>
</div> </div>
</div> </div>
</template> </template>
<template v-else-if="info.listStyleId === 11 || info.listStyleId === 15 || info.listStyleId === 10"> <template v-else-if="info.listStyleId === 11 || info.listStyleId === 15 || info.listStyleId === 10">
<div class="article-wrap"> <div class="article-wrap">
<ul class="articles"> <ul class="articles">
<li v-for="(item, i) in articles" <li v-for="(item, i) in articles" :key="i" :class="{ 'news-notice': info.listStyleId === 55 }"
:key="i"
:class="{'news-notice': info.listStyleId === 55}"
@click="toArtice(item)"> @click="toArtice(item)">
<template v-if="info.listStyleId === 55"> <template v-if="info.listStyleId === 55">
<div class="releaseTime"> <div class="releaseTime">
@ -271,63 +195,43 @@
</template> </template>
</span> </span>
</template> </template>
<span v-if="item.listStyleId === 10 " <span v-if="item.listStyleId === 10" class="meta">{{ item.releaseTime }} {{ item.labelName
class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' + && ' | ' +
item.labelName }}</span> item.labelName }}</span>
<template v-if="item.listStyleId === 15 || item.listStyleId === 16"> <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
<div v-if="item.keynoteSpeaker" <div v-if="item.keynoteSpeaker" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/mine.png" alt="" /> {{ item.keynoteSpeaker }}
<img class="icon"
src="@/assets/images/mine.png"
alt="" /> {{ item.keynoteSpeaker }}
</div> </div>
<div v-if="item.activityStartTime" <div v-if="item.activityStartTime" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/time.png" alt="" />
<img class="icon"
src="@/assets/images/time.png"
alt="" />
{{ item.activityStartTime }} {{ item.activityStartTime }}
</div> </div>
<div v-if="item.offlineLocation" <div v-if="item.offlineLocation" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/location.png" alt="" /> {{ item.offlineLocation
<img class="icon" }}
src="@/assets/images/location.png"
alt="" /> {{ item.offlineLocation }}
</div> </div>
<div v-if="item.onlineLocation" <div v-if="item.onlineLocation" class="meta">
class="meta"> <img class="icon" src="@/assets/images/online.png" alt="" /> {{ item.onlineLocation }}
<img class="icon"
src="@/assets/images/online.png"
alt="" /> {{ item.onlineLocation }}
</div> </div>
</template> </template>
</div> </div>
<img class="pic" <img class="pic" :src="item.titleImg" alt=""
:src="item.titleImg"
alt=""
onerror="javascript:this.src='./images/1.png?id=1';" /> onerror="javascript:this.src='./images/1.png?id=1';" />
</template> </template>
</li> </li>
</ul> </ul>
<div v-if="articles.length" <div v-if="articles.length" class="pagination">
class="pagination"> <el-pagination background @current-change="currentChange" :current-page="page"
<el-pagination background :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
@current-change="currentChange"
:current-page="page"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total"></el-pagination>
</div> </div>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div class="article-wrap"> <div class="article-wrap">
<ul :class="['articles', { media: info.listStyleId === 74 }]"> <ul :class="['articles', { media: info.listStyleId === 74 }]">
<li v-for="(item, i) in articles" <li v-for="(item, i) in articles" :key="i"
:key="i"
:class="{ 'news-notice': info.listStyleId === 55, 'org': info.listStyleId === 68 }" :class="{ 'news-notice': info.listStyleId === 55, 'org': info.listStyleId === 68 }"
class="overDetail" class="overDetail" @click="toArtice(item)">
@click="toArtice(item)">
<template v-if="info.listStyleId === 55"> <template v-if="info.listStyleId === 55">
<div class="releaseTime"> <div class="releaseTime">
<p class="d">{{ item.date }}</p> <p class="d">{{ item.date }}</p>
@ -336,10 +240,7 @@
<div class="news-title">{{ item.title }}</div> <div class="news-title">{{ item.title }}</div>
</template> </template>
<template v-else> <template v-else>
<img v-if="info.listStyleId !== 74" <img v-if="info.listStyleId !== 74" class="pic" :src="item.titleImg" alt=""
class="pic"
:src="item.titleImg"
alt=""
onerror="javascript:this.src='./images/1.png?id=1';" /> onerror="javascript:this.src='./images/1.png?id=1';" />
<template v-else-if="item.fileList"> <template v-else-if="item.fileList">
@ -348,20 +249,14 @@
src="https://huorantech.com/iasf/sysFiles/preview/1706961813193707521" src="https://huorantech.com/iasf/sysFiles/preview/1706961813193707521"
:preview-src-list="['https://huorantech.com/iasf/sysFiles/preview/1706961813193707521']"> :preview-src-list="['https://huorantech.com/iasf/sysFiles/preview/1706961813193707521']">
</el-image> --> </el-image> -->
<video v-if="Util.isVideo(item.fileList[0].fileName.substring(item.fileList[0].fileName.lastIndexOf('.') + 1))" <video
class="media-video" v-if="Util.isVideo(item.fileList[0].fileName.substring(item.fileList[0].fileName.lastIndexOf('.') + 1))"
controls class="media-video" controls x5-playsinline x5-video-player-type="h5"
x5-playsinline :poster="isIphone ? 'https://huorantech.com/images/about/12.png' : ''" preload>
x5-video-player-type="h5" <source :src="item.fileList[0].filePath" type="video/mp4">
:poster="isIphone ? 'https://huorantech.com/images/about/12.png' : ''"
preload>
<source :src="item.fileList[0].filePath"
type="video/mp4">
您的浏览器不支持 video 标签 您的浏览器不支持 video 标签
</video> </video>
<el-image v-else <el-image v-else class="media-pic" :src="item.fileList[0].filePath"
class="media-pic"
:src="item.fileList[0].filePath"
:preview-src-list="[item.fileList[0].filePath]"> :preview-src-list="[item.fileList[0].filePath]">
</el-image> </el-image>
</template> </template>
@ -371,67 +266,48 @@
class="type"> class="type">
{{ item.classificationName }} {{ item.classificationName }}
</p> </p>
<h6 class="titleDes" <h6 class="titleDes" :title="item.title">{{ item.title }}</h6>
:title="item.title">{{ item.title }}</h6> <template
<template v-if="item.listStyleId === 11 || item.listStyleId == 12 || item.listStyleId == 68"> v-if="item.listStyleId === 11 || item.listStyleId == 12 || item.listStyleId == 68">
<span class="meta">{{ item.releaseTime }}</span> <span class="meta">{{ item.releaseTime }}</span>
<div class="des" <div class="des" v-html="item.mainBody"></div>
v-html="item.mainBody"></div>
</template> </template>
<span v-if="item.listStyleId === 10 " <span v-if="item.listStyleId === 10" class="meta">{{ item.releaseTime }} {{ item.labelName
class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' + && ' | ' +
item.labelName }}</span> item.labelName }}</span>
<template v-if="item.listStyleId === 15 || item.listStyleId === 16"> <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
<div v-if="item.keynoteSpeaker" <div v-if="item.keynoteSpeaker" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/mine.png" alt="" /> {{ item.keynoteSpeaker }}
<img class="icon"
src="@/assets/images/mine.png"
alt="" /> {{ item.keynoteSpeaker }}
</div> </div>
<div v-if="item.activityStartTime" <div v-if="item.activityStartTime" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/time.png" alt="" />
<img class="icon"
src="@/assets/images/time.png"
alt="" />
{{ item.activityStartTime }} {{ item.activityStartTime }}
</div> </div>
<div v-if="item.offlineLocation" <div v-if="item.offlineLocation" class="meta m-b-10">
class="meta m-b-10"> <img class="icon" src="@/assets/images/location.png" alt="" /> {{ item.offlineLocation
<img class="icon" }}
src="@/assets/images/location.png"
alt="" /> {{ item.offlineLocation }}
</div> </div>
<div v-if="item.onlineLocation" <div v-if="item.onlineLocation" class="meta">
class="meta"> <img class="icon" src="@/assets/images/online.png" alt="" /> {{ item.onlineLocation }}
<img class="icon"
src="@/assets/images/online.png"
alt="" /> {{ item.onlineLocation }}
</div> </div>
</template> </template>
<el-button v-if="item.listStyleId === 15 || item.listStyleId == 68" <el-button v-if="item.listStyleId === 15 || item.listStyleId == 68" type="primary"
type="primary" class="readDetailBtn">{{
class="readDetailBtn">{{ $t('column.readDetail') }}</el-button> $t('column.readDetail') }}</el-button>
</div> </div>
</template> </template>
</li> </li>
</ul> </ul>
<div v-if="total > articles.length" <div v-if="total > articles.length" class="pagination">
class="pagination"> <el-pagination background @current-change="currentChange" :current-page="page"
<el-pagination background :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
@current-change="currentChange"
:current-page="page"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="total"></el-pagination>
</div> </div>
</div> </div>
</template> </template>
</template> </template>
</template> </template>
<div v-else <div v-else class="none">
class="none"> <img src="@/assets/images/none.png" alt="">
<img src="@/assets/images/none.png"
alt="">
<p class="text">{{ $t('column.comming') }}</p> <p class="text">{{ $t('column.comming') }}</p>
</div> </div>
</div> </div>
@ -442,10 +318,7 @@
<div class="right"> <div class="right">
<p class="l-title">{{ $t('column.hot') }}</p> <p class="l-title">{{ $t('column.hot') }}</p>
<ul class="list"> <ul class="list">
<li v-for="(item, i) in hots" <li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)">
:key="i"
:title="item.title"
@click="toArtice(item)">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span> <span class="date">{{ item.releaseTime }}</span>
</li> </li>
@ -453,10 +326,7 @@
<p class="l-title">{{ $t('column.latestNews') }}</p> <p class="l-title">{{ $t('column.latestNews') }}</p>
<ul class="list"> <ul class="list">
<li v-for="(item, i) in news" <li v-for="(item, i) in news" :key="i" :title="item.title" @click="toArtice(item)">
:key="i"
:title="item.title"
@click="toArtice(item)">
<p class="text">{{ item.title }}</p> <p class="text">{{ item.title }}</p>
<span class="date">{{ item.releaseTime }}</span> <span class="date">{{ item.releaseTime }}</span>
</li> </li>
@ -479,7 +349,7 @@ export default {
data () { data () {
return { return {
Util, Util,
loaded: false, loaded: true,
fromColumn: this.$route.query.column, fromColumn: this.$route.query.column,
isIphone: false, isIphone: false,
columnId: '', columnId: '',
@ -563,13 +433,13 @@ export default {
// //
getInfo () { getInfo () {
this.loading = true this.loading = true
this.loaded = false this.loaded = true
this.id && this.id &&
this.$post(`${this.api.findColumn}?id=${this.id}`) this.$post(`${this.api.findColumn}?id=${this.id}`)
.then(({ data }) => { .then(({ data }) => {
this.columnClick(data); this.columnClick(data);
if (data.typeId !== 3 && !data.menuVisible) { if (data.typeId === 3 || data.menuVisible) {
this.loaded = true; // this.loaded = false; //
} }
this.info = data this.info = data
this.pageSize = data.pageSize || 10 this.pageSize = data.pageSize || 10
@ -878,10 +748,12 @@ export default {
position: relative; position: relative;
height: 24rem; height: 24rem;
color: #fff; color: #fff;
img { img {
height: 24rem; height: 24rem;
object-fit: cover; object-fit: cover;
} }
.texts { .texts {
position: absolute; position: absolute;
top: 160px; top: 160px;
@ -899,9 +771,11 @@ export default {
font-size: 1.6rem; font-size: 1.6rem;
} }
} }
.el-tree-node__content { .el-tree-node__content {
padding-left: 10px !important; padding-left: 10px !important;
} }
.l-title { .l-title {
font-weight: 600; font-weight: 600;
} }
@ -921,8 +795,10 @@ export default {
.left { .left {
width: 83%; width: 83%;
&:only-child { &:only-child {
width: 100%; width: 100%;
.detail:only-child { .detail:only-child {
max-width: none; max-width: none;
} }
@ -1022,9 +898,11 @@ export default {
&+.detail { &+.detail {
padding-left: 10px; padding-left: 10px;
} }
width: 22%; width: 22%;
margin-right: 0.6rem; margin-right: 0.6rem;
overflow: auto; overflow: auto;
span { span {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -1100,33 +978,41 @@ export default {
padding: 10px 20px; padding: 10px 20px;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.texts { .texts {
padding-left: 1.5rem; padding-left: 1.5rem;
.titleDes { .titleDes {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 1.2rem; font-size: 1.2rem;
margin-top: 0; margin-top: 0;
} }
.des { .des {
margin-top: 10px; margin-top: 10px;
} }
} }
.titleDes { .titleDes {
margin-top: 0.8rem; margin-top: 0.8rem;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
} }
.readDetailBtn { .readDetailBtn {
margin-top: 10px; margin-top: 10px;
} }
.texts { .texts {
flex-grow: 1; flex-grow: 1;
} }
} }
.overDetail { .overDetail {
.texts { .texts {
width: 70%; width: 70%;
} }
} }
li { li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -1178,34 +1064,42 @@ export default {
object-fit: cover; object-fit: cover;
} }
} }
.media { .media {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-left: 10px; margin-left: 10px;
li { li {
flex-direction: column; flex-direction: column;
width: calc(33% - 30px); width: calc(33% - 30px);
margin-right: 30px; margin-right: 30px;
background-color: transparent; background-color: transparent;
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
} }
} }
.media-video { .media-video {
width: 100%; width: 100%;
height: 155px; height: 155px;
} }
/deep/.media-pic { /deep/.media-pic {
width: 100%; width: 100%;
height: 155px; height: 155px;
img { img {
object-fit: cover; object-fit: cover;
} }
} }
.texts { .texts {
width: 100% !important; width: 100% !important;
padding-left: 0; padding-left: 0;
} }
h6 { h6 {
margin-top: 10px; margin-top: 10px;
margin-bottom: 0; margin-bottom: 0;
@ -1214,6 +1108,7 @@ export default {
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
} }
} }
.news-notice { .news-notice {
.releaseTime { .releaseTime {
width: 88px; width: 88px;
@ -1224,16 +1119,19 @@ export default {
text-align: center; text-align: center;
background: #0b5086; background: #0b5086;
} }
.d { .d {
font-size: 2rem; font-size: 2rem;
font-family: DINCondensed-Bold, DINCondensed; font-family: DINCondensed-Bold, DINCondensed;
font-weight: bold; font-weight: bold;
line-height: 43px; line-height: 43px;
} }
.m { .m {
font-size: 0.9rem; font-size: 0.9rem;
line-height: 20px; line-height: 20px;
} }
.news-title { .news-title {
width: calc(100% - 110px); width: calc(100% - 110px);
font-size: 1.1rem; font-size: 1.1rem;
@ -1242,9 +1140,11 @@ export default {
@include mul-ellipsis(2); @include mul-ellipsis(2);
} }
} }
.org { .org {
padding: 15px; padding: 15px;
} }
.right { .right {
width: 17%; width: 17%;
padding-left: 20px; padding-left: 20px;
@ -1304,6 +1204,7 @@ export default {
} }
} }
} }
.party { .party {
/deep/.columns { /deep/.columns {
.el-tree-node__content { .el-tree-node__content {
@ -1311,8 +1212,10 @@ export default {
color: $partyTheme; color: $partyTheme;
} }
} }
.is-current>.el-tree-node__content { .is-current>.el-tree-node__content {
background-color: $lightPartyTheme; background-color: $lightPartyTheme;
&:after { &:after {
background-color: $partyTheme; background-color: $partyTheme;
} }
@ -1323,6 +1226,7 @@ export default {
} }
} }
} }
.article { .article {
.readDetailBtn { .readDetailBtn {
width: 100px; width: 100px;
@ -1332,26 +1236,31 @@ export default {
border-color: $partyTheme; border-color: $partyTheme;
} }
} }
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active { /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: $partyTheme !important; background-color: $partyTheme !important;
} }
} }
.detail { .detail {
flex: 1; flex: 1;
max-width: 77%; max-width: 77%;
padding: 10px 15px; padding: 10px 15px;
background-color: #fff; background-color: #fff;
overflow: auto; overflow: auto;
h2 { h2 {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 1.9rem; font-size: 1.9rem;
color: #1c1c1c; color: #1c1c1c;
} }
.meta { .meta {
margin: 1rem 0; margin: 1rem 0;
font-size: 0.88rem; font-size: 0.88rem;
color: #9b9b9b; color: #9b9b9b;
} }
.brief { .brief {
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -1360,18 +1269,22 @@ export default {
color: #606060; color: #606060;
border-bottom: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8;
} }
/deep/.des { /deep/.des {
a { a {
color: rgb(0, 0, 238); color: rgb(0, 0, 238);
word-wrap: break-word; word-wrap: break-word;
} }
img { img {
max-width: 100%; max-width: 100%;
object-fit: cover; object-fit: cover;
} }
} }
.annex { .annex {
margin-top: 30px; margin-top: 30px;
h6 { h6 {
padding-left: 8px; padding-left: 8px;
margin-bottom: 20px; margin-bottom: 20px;
@ -1382,21 +1295,25 @@ export default {
color: #333; color: #333;
border-left: 4px solid #1583ff; border-left: 4px solid #1583ff;
} }
li { li {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
} }
.name { .name {
margin-right: 8px; margin-right: 8px;
font-size: 14px; font-size: 14px;
} }
.download { .download {
color: #1583ff; color: #1583ff;
cursor: pointer; cursor: pointer;
} }
} }
} }
.none { .none {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@ -1404,6 +1321,7 @@ export default {
align-items: center; align-items: center;
flex: 1; flex: 1;
text-align: center; text-align: center;
.text { .text {
margin-top: 20px; margin-top: 20px;
font-size: 0.9rem; font-size: 0.9rem;
@ -1414,22 +1332,28 @@ export default {
@media (max-width: 1200px) { @media (max-width: 1200px) {
.banner { .banner {
height: 15rem !important; height: 15rem !important;
img { img {
height: 15rem !important; height: 15rem !important;
} }
.texts { .texts {
top: 6rem; top: 6rem;
left: 3rem; left: 3rem;
} }
} }
.article { .article {
flex-direction: column; flex-direction: column;
width: 90%; width: 90%;
.columns { .columns {
width: 40%; width: 40%;
} }
.left { .left {
width: 100%; width: 100%;
.forms { .forms {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -1461,19 +1385,23 @@ export default {
align-items: flex-start; align-items: flex-start;
padding: 1rem; padding: 1rem;
margin-top: 1rem; margin-top: 1rem;
.pic { .pic {
width: 100%; width: 100%;
margin: 10px 0; margin: 10px 0;
} }
} }
.readDetail { .readDetail {
align-items: flex-start; align-items: flex-start;
.texts { .texts {
width: 100%; width: 100%;
padding-left: 0; padding-left: 0;
} }
} }
} }
.media { .media {
li { li {
padding: 0; padding: 0;
@ -1490,56 +1418,69 @@ export default {
@media (max-width: 640px) { @media (max-width: 640px) {
.banner { .banner {
height: 12rem !important; height: 12rem !important;
img { img {
height: 12rem !important; height: 12rem !important;
} }
.texts { .texts {
left: 2rem; left: 2rem;
bottom: 2rem; bottom: 2rem;
.text { .text {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
} }
.article { .article {
.contents { .contents {
flex-direction: column; flex-direction: column;
padding: 0 15px; padding: 0 15px;
} }
.columns, .columns,
.article-wrap { .article-wrap {
width: 100%; width: 100%;
margin-right: 0; margin-right: 0;
} }
.articles { .articles {
li { li {
.leftBox { .leftBox {
padding-left: 0; padding-left: 0;
.titleDes { .titleDes {
line-height: 1.368rem; line-height: 1.368rem;
} }
} }
} }
} }
.media { .media {
margin-left: 0; margin-left: 0;
li { li {
width: calc(50% - 20px); width: calc(50% - 20px);
margin-right: 20px; margin-right: 20px;
&:nth-child(2n) { &:nth-child(2n) {
margin-right: 0; margin-right: 0;
} }
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 20px; margin-right: 20px;
} }
} }
} }
} }
.forms { .forms {
.switch { .switch {
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
margin-right: 0; margin-right: 0;
li { li {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
@ -1547,13 +1488,16 @@ export default {
} }
} }
} }
.detail { .detail {
h2 { h2 {
font-size: 1.3rem; font-size: 1.3rem;
} }
.meta { .meta {
font-size: 0.7rem; font-size: 0.7rem;
} }
.brief { .brief {
font-size: 1rem; font-size: 1rem;
} }

File diff suppressed because it is too large Load Diff

@ -1,21 +1,14 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<el-carousel class="carousel fadeInUp" <el-carousel class="carousel fadeInUp" :interval="6000" height="354px"
:interval="6000"
height="354px"
:arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<el-carousel-item v-if="item.pic && item.isEnable" <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
:key="i"> <div class="pic" :style="{ backgroundImage: 'url(' + item.pic + ')' }"></div>
<div class="pic"
:style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
<div class="text-wrap"> <div class="text-wrap">
<div v-if="!GTA && !i" <div v-if="!GTA && !i" class="qrcode-wrap">
class="qrcode-wrap"> <img class="qrcode" src="https://www.occupationlab.com/images/mini-program.jpg" alt="">
<img class="qrcode"
src="https://www.occupationlab.com/images/mini-program.jpg"
alt="">
<p class="text">扫小程序下单</p> <p class="text">扫小程序下单</p>
</div> </div>
<div class="texts"> <div class="texts">
@ -30,12 +23,9 @@
<div class="inner"> <div class="inner">
<ul class="intro"> <ul class="intro">
<template v-for="(item, i) in modules[1].list"> <template v-for="(item, i) in modules[1].list">
<li v-if="item.isEnable" <li v-if="item.isEnable" :key="i" :class="[{ 'cursor-pointer': isLink(item.link.linkName) }, 'fadeInDown' + i]"
:key="i"
:class="[{'cursor-pointer': isLink(item.link.linkName)}, 'fadeInDown' + i]"
@click="openLink(item)"> @click="openLink(item)">
<img :src="item.pic" <img :src="item.pic" alt="">
alt="">
<div class="text"> <div class="text">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
<p class="desc">{{ item.des }}</p> <p class="desc">{{ item.des }}</p>
@ -50,28 +40,19 @@
<div class="type-wrap"> <div class="type-wrap">
<div class="tab-wrap"> <div class="tab-wrap">
<div> <div>
<img src="@/assets/images/hot.png" <img src="@/assets/images/hot.png" alt="">
alt=""> <img class="m-l-5 m-r-10" src="@/assets/images/type.png" alt="">
<img class="m-l-5 m-r-10"
src="@/assets/images/type.png"
alt="">
</div> </div>
<div class="tab-con"> <div class="tab-con">
<ul class="tab"> <ul class="tab">
<li v-for="(tab, i) in tabs" <li v-for="(tab, i) in tabs" :key="i" :class="{ active: curTab === tab.id }" @click="tabChange(tab)">{{
:key="i" tab.name }}</li>
:class="{active: curTab === tab.id}"
@click="tabChange(tab)">{{ tab.name }}</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="search"> <div class="search">
<img class="icon" <img class="icon" src="@/assets/images/search.png" alt="">
src="@/assets/images/search.png" <input type="text" placeholder="请输入产品名称" v-model="form.productName">
alt="">
<input type="text"
placeholder="请输入产品名称"
v-model="form.productName">
</div> </div>
</div> </div>
<div class="filter"> <div class="filter">
@ -79,36 +60,27 @@
<dl> <dl>
<dt>学科类别</dt> <dt>学科类别</dt>
<div class="vals"> <div class="vals">
<dd :class="{active: categoryId === ''}" <dd :class="{ active: categoryId === '' }" @click="categoryClick({ id: '' }, 1)">全部</dd>
@click="categoryClick({id: ''}, 1)">全部</dd> <dd :class="{ active: categoryId === 1 }" style="margin-right: 20px" @click="categoryClick({ id: 1 }, 1)">不限
<dd :class="{active: categoryId === 1}" </dd>
style="margin-right: 20px" <dd v-for="(item, i) in category" :key="i" :class="{ active: categoryId === item.id }"
@click="categoryClick({id: 1}, 1)">不限</dd>
<dd v-for="(item, i) in category"
:key="i"
:class="{active: categoryId === item.id}"
@click="categoryClick(item, 1)">{{ item.name }}</dd> @click="categoryClick(item, 1)">{{ item.name }}</dd>
</div> </div>
</dl> </dl>
<dl v-if="categoryId && categoryId !== 1"> <dl v-if="categoryId && categoryId !== 1">
<dt>专业类</dt> <dt>专业类</dt>
<div class="vals"> <div class="vals">
<dd :class="{active: professionalCategoryId === ''}" <dd :class="{ active: professionalCategoryId === '' }" @click="categoryClick({ id: '' }, 2)">全部</dd>
@click="categoryClick({id: ''}, 2)">全部</dd> <dd v-for="(item, i) in professionalClasses" :key="i"
<dd v-for="(item, i) in professionalClasses" :class="{ active: professionalCategoryId === item.id }" @click="categoryClick(item, 2)">{{ item.name }}
:key="i" </dd>
:class="{active: professionalCategoryId === item.id}"
@click="categoryClick(item, 2)">{{ item.name }}</dd>
</div> </div>
</dl> </dl>
<dl v-if="professionalCategoryId && professionalCategoryId !== 1"> <dl v-if="professionalCategoryId && professionalCategoryId !== 1">
<dt>专业</dt> <dt>专业</dt>
<div class="vals"> <div class="vals">
<dd :class="{active: professionalId === ''}" <dd :class="{ active: professionalId === '' }" @click="categoryClick({ id: '' }, 3)">全部</dd>
@click="categoryClick({id: ''}, 3)">全部</dd> <dd v-for="(item, i) in professionals" :key="i" :class="{ active: professionalId === item.id }"
<dd v-for="(item, i) in professionals"
:key="i"
:class="{active: professionalId === item.id}"
@click="categoryClick(item, 3)">{{ item.name }}</dd> @click="categoryClick(item, 3)">{{ item.name }}</dd>
</div> </div>
</dl> </dl>
@ -116,11 +88,8 @@
<dl v-if="curTab == 3"> <dl v-if="curTab == 3">
<dt>产品标签</dt> <dt>产品标签</dt>
<div class="vals"> <div class="vals">
<dd :class="{active: form.tagId === ''}" <dd :class="{ active: form.tagId === '' }" @click="filterChange('', 'tagId')">全部</dd>
@click="filterChange('', 'tagId')">全部</dd> <dd v-for="(item, i) in labels" :key="i" :class="{ active: form.tagId === item.tagsId }"
<dd v-for="(item, i) in labels"
:key="i"
:class="{active: form.tagId === item.tagsId}"
@click="filterChange(item.tagsId, 'tagId')">{{ item.tagsName }}</dd> @click="filterChange(item.tagsId, 'tagId')">{{ item.tagsName }}</dd>
</div> </div>
</dl> </dl>
@ -130,8 +99,7 @@
<div class="vals"> <div class="vals">
<dd :class="{ active: form.productClassification === '' }" <dd :class="{ active: form.productClassification === '' }"
@click="filterChange('', 'productClassification')">全部</dd> @click="filterChange('', 'productClassification')">全部</dd>
<dd v-for="(item, i) in classifications" <dd v-for="(item, i) in classifications" :key="i"
:key="i"
:class="{ active: form.productClassification === item.id }" :class="{ active: form.productClassification === item.id }"
@click="filterChange(item.id, 'productClassification')">{{ item.classificationName }}</dd> @click="filterChange(item.id, 'productClassification')">{{ item.classificationName }}</dd>
</div> </div>
@ -139,11 +107,8 @@
<dl> <dl>
<dt>方案名称</dt> <dt>方案名称</dt>
<div class="vals"> <div class="vals">
<dd :class="{active: form.websiteMallId === ''}" <dd :class="{ active: form.websiteMallId === '' }" @click="filterChange('', 'websiteMallId')">全部</dd>
@click="filterChange('', 'websiteMallId')">全部</dd> <dd v-for="(item, i) in schemes" :key="i" :class="{ active: form.websiteMallId === item.id }"
<dd v-for="(item, i) in schemes"
:key="i"
:class="{active: form.websiteMallId === item.id}"
@click="filterChange(item.id, 'websiteMallId')">{{ item.title }}</dd> @click="filterChange(item.id, 'websiteMallId')">{{ item.title }}</dd>
</div> </div>
</dl> </dl>
@ -151,11 +116,8 @@
<dl> <dl>
<dt>产品类型</dt> <dt>产品类型</dt>
<div class="vals"> <div class="vals">
<dd :class="{active: form.productType === ''}" <dd :class="{ active: form.productType === '' }" @click="filterChange('', 'productType')">全部</dd>
@click="filterChange('', 'productType')">全部</dd> <dd v-for="(item, i) in types" :key="i" :class="{ active: form.productType === item.typeId }"
<dd v-for="(item, i) in types"
:key="i"
:class="{active: form.productType === item.typeId}"
@click="filterChange(item.typeId, 'productType')">{{ item.typeName }}</dd> @click="filterChange(item.typeId, 'productType')">{{ item.typeName }}</dd>
</div> </div>
</dl> </dl>
@ -163,14 +125,10 @@
<div class="filter m-t-20"> <div class="filter m-t-20">
<dl> <dl>
<dd v-for="(item, i) in sorts" <dd v-for="(item, i) in sorts" :key="i" :class="{ active: form.sort === item.id }"
:key="i"
:class="{active: form.sort === item.id}"
@click="filterChange(item.id, 'sort')">{{ item.name }}</dd> @click="filterChange(item.id, 'sort')">{{ item.name }}</dd>
<dd :class="{active: form.sort === 2 || form.sort === 5}" <dd :class="{ active: form.sort === 2 || form.sort === 5 }" @click="sort">发布时间</dd>
@click="sort">发布时间</dd> <span class="caret" @click="sort">
<span class="caret"
@click="sort">
<i :class="['asc', { active: form.sort === 2 }]"></i> <i :class="['asc', { active: form.sort === 2 }]"></i>
<i :class="['desc', { active: form.sort === 5 }]"></i> <i :class="['desc', { active: form.sort === 5 }]"></i>
</span> </span>
@ -180,61 +138,37 @@
<div class="courses"> <div class="courses">
<template v-if="list.length"> <template v-if="list.length">
<ul> <ul>
<li v-for="(item, i) in list" <li v-for="(item, i) in list" :key="i" @click="toDetail(item.mallId)">
:key="i" <img :src="item.coverDrawing" alt="" />
@click="toDetail(item.mallId)"> <img v-if="item.logoOfOurSchool" class="my-school" src="@/assets/images/my-school.png" alt="">
<img :src="item.coverDrawing"
alt="" />
<img v-if="item.logoOfOurSchool"
class="my-school"
src="@/assets/images/my-school.png"
alt="">
<div class="texts"> <div class="texts">
<el-tooltip effect="dark" <el-tooltip effect="dark" :visible-arrow="false" :content="item.productName" placement="bottom">
:visible-arrow="false"
:content="item.productName"
placement="bottom">
<div class="title">{{ item.productName }}</div> <div class="title">{{ item.productName }}</div>
</el-tooltip> </el-tooltip>
<div class="desc" <div class="desc" v-html="item.productIntroduction"></div>
v-html="item.productIntroduction"></div>
<div class="tags"> <div class="tags">
<el-tooltip v-if="item.tagsName" <el-tooltip v-if="item.tagsName" class="item" effect="dark" :visible-arrow="false"
class="item" :content="item.tagsName" placement="bottom">
effect="dark"
:visible-arrow="false"
:content="item.tagsName"
placement="bottom">
<div> <div>
<el-tag v-for="(tag, i) in item.tagsName.split(',')" <el-tag v-for="(tag, i) in item.tagsName.split(',')" :key="i" class="tag">{{ tag }}</el-tag>
:key="i"
class="tag">{{ tag }}</el-tag>
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div :class="['metas']"> <div :class="['metas']">
<el-tag v-if="item.selected" <el-tag v-if="item.selected" type="danger" effect="dark">
type="danger"
effect="dark">
官方精选 官方精选
</el-tag> </el-tag>
<el-tag v-if="item.typeName" <el-tag v-if="item.typeName" effect="dark">
effect="dark">
{{ item.typeName }} {{ item.typeName }}
</el-tag> </el-tag>
<div v-if="item.isCourse" <div v-if="item.isCourse" class="meta">{{ item.learningCount }}人学过</div>
class="meta">{{ item.learningCount }}人学过</div>
</div> </div>
</div> </div>
</li> </li>
</ul> </ul>
<div class="pagination"> <div class="pagination">
<el-pagination background <el-pagination background layout="total, prev, pager, next" :page-size="pageSize" :total="total"
layout="total, prev, pager, next" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
:page-size="pageSize"
:total="total"
@current-change="handleCurrentChange"
:current-page="page"></el-pagination>
</div> </div>
</template> </template>
</div> </div>
@ -243,8 +177,7 @@
<div class="copyright"> <div class="copyright">
<!-- <span>© Copyright 2021 Occupation Lab 职站</span> --> <!-- <span>© Copyright 2021 Occupation Lab 职站</span> -->
<a href="https://beian.miit.gov.cn/#/Integrated/index" <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a>
target="_blank">粤ICP备20072679号</a>
</div> </div>
</div> </div>
</template> </template>
@ -589,12 +522,15 @@ export default {
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
} }
img { img {
height: 100%; height: 100%;
} }
/deep/.el-carousel__container { /deep/.el-carousel__container {
height: 100%; height: 100%;
} }
.text-wrap { .text-wrap {
position: absolute; position: absolute;
top: 55%; top: 55%;
@ -604,13 +540,16 @@ export default {
color: #fff; color: #fff;
transform: translateY(-50%); transform: translateY(-50%);
} }
h6 { h6 {
margin-bottom: 25px; margin-bottom: 25px;
font-size: 2.2rem; font-size: 2.2rem;
} }
.sub { .sub {
font-size: 1.5rem; font-size: 1.5rem;
} }
.qrcode-wrap { .qrcode-wrap {
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
@ -618,12 +557,14 @@ export default {
text-align: center; text-align: center;
background-color: #fff; background-color: #fff;
border-radius: 12px; border-radius: 12px;
.text { .text {
margin-top: 5px; margin-top: 5px;
font-size: 12px; font-size: 12px;
color: #979797; color: #979797;
} }
} }
.qrcode { .qrcode {
width: 120px; width: 120px;
height: 120px; height: 120px;
@ -636,63 +577,78 @@ export default {
align-items: center; align-items: center;
padding: 20px 0; padding: 20px 0;
background-color: #fff; background-color: #fff;
li { li {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
transition: 0.3s; transition: 0.3s;
&.active { &.active {
h6, h6,
.desc { .desc {
color: #006eff; color: #006eff;
} }
} }
&:hover { &:hover {
margin-top: -15px; margin-top: -15px;
h6, h6,
.desc { .desc {
color: #006eff; color: #006eff;
} }
} }
} }
img { img {
width: 50px; width: 50px;
margin-right: 15px; margin-right: 15px;
} }
h6 { h6 {
margin-bottom: 5px; margin-bottom: 5px;
font-size: 16px; font-size: 16px;
color: #0b1d30; color: #0b1d30;
transition: 0.5s; transition: 0.5s;
} }
.desc { .desc {
font-size: 13px; font-size: 13px;
color: #757f92; color: #757f92;
transition: 0.5s; transition: 0.5s;
} }
} }
.inner-wrap { .inner-wrap {
padding: 18px 0; padding: 18px 0;
background: url(../../../assets/images/product/bg1.png) 0 159px no-repeat, background: url(../../../assets/images/product/bg1.png) 0 159px no-repeat,
url(../../../assets/images/product/bg2.png) bottom right no-repeat; url(../../../assets/images/product/bg2.png) bottom right no-repeat;
background-color: #f3f6fa; background-color: #f3f6fa;
} }
.inner { .inner {
width: 1146px; width: 1146px;
margin: 0 auto; margin: 0 auto;
} }
.type-wrap { .type-wrap {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 18px; margin-bottom: 18px;
.left { .left {
display: inline-flex; display: inline-flex;
} }
.tab-wrap { .tab-wrap {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
.tab { .tab {
display: inline-flex; display: inline-flex;
li { li {
position: relative; position: relative;
margin: 0 20px; margin: 0 20px;
@ -703,6 +659,7 @@ export default {
color: #0b1d30; color: #0b1d30;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
@ -713,12 +670,14 @@ export default {
transform: translateX(-50%); transform: translateX(-50%);
border-radius: 2px; border-radius: 2px;
} }
&.active:after { &.active:after {
background-color: #1583ff; background-color: #1583ff;
} }
} }
} }
} }
.search { .search {
position: relative; position: relative;
display: flex; display: flex;
@ -728,6 +687,7 @@ export default {
padding: 0 18px; padding: 0 18px;
background-color: #fff; background-color: #fff;
border-radius: 31px; border-radius: 31px;
input { input {
height: 40px; height: 40px;
margin-left: 7px; margin-left: 7px;
@ -737,15 +697,18 @@ export default {
outline: none !important; outline: none !important;
} }
} }
.filter { .filter {
padding: 5px 30px; padding: 5px 30px;
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 10px;
dl { dl {
position: relative; position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 20px 0; margin: 20px 0;
dt { dt {
min-width: 60px; min-width: 60px;
padding: 5px 0; padding: 5px 0;
@ -756,6 +719,7 @@ export default {
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
} }
dd { dd {
padding: 5px 15px; padding: 5px 15px;
color: #333; color: #333;
@ -763,35 +727,43 @@ export default {
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
&.active { &.active {
font-weight: 600; font-weight: 600;
color: #1583ff; color: #1583ff;
} }
} }
.category { .category {
margin: 5px 10px 0; margin: 5px 10px 0;
} }
/deep/.category-item { /deep/.category-item {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin-right: 20px; margin-right: 20px;
.name { .name {
position: relative; position: relative;
font-size: 14px; font-size: 14px;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
&+.el-cascader { &+.el-cascader {
width: 30px; width: 30px;
} }
} }
&.active { &.active {
.name { .name {
color: #1583ff; color: #1583ff;
} }
} }
} }
/deep/.el-cascader { /deep/.el-cascader {
width: auto; width: auto;
.el-input { .el-input {
.el-input__inner { .el-input__inner {
font-size: 14px; font-size: 14px;
@ -799,6 +771,7 @@ export default {
border: 0; border: 0;
} }
} }
&.active { &.active {
.el-input .el-input__inner { .el-input .el-input__inner {
color: #1583ff; color: #1583ff;
@ -806,12 +779,14 @@ export default {
} }
} }
} }
.vals { .vals {
display: inline-flex; display: inline-flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
width: 920px; width: 920px;
} }
.caret { .caret {
position: absolute; position: absolute;
top: 4px; top: 4px;
@ -819,36 +794,44 @@ export default {
width: 20px; width: 20px;
height: 20px; height: 20px;
cursor: pointer; cursor: pointer;
i { i {
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
border: 5px solid transparent; border: 5px solid transparent;
} }
.asc { .asc {
top: 0; top: 0;
border-bottom-color: #c0c4cc; border-bottom-color: #c0c4cc;
&.active { &.active {
border-bottom-color: #409eff; border-bottom-color: #409eff;
} }
} }
.desc { .desc {
top: 12px; top: 12px;
border-top-color: #c0c4cc; border-top-color: #c0c4cc;
&.active { &.active {
border-top-color: #409eff; border-top-color: #409eff;
} }
} }
} }
} }
.courses { .courses {
position: relative; position: relative;
margin-top: 24px; margin-top: 24px;
ul { ul {
position: relative; position: relative;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
li { li {
position: relative; position: relative;
width: calc((100% - 66px) / 4); width: calc((100% - 66px) / 4);
@ -859,15 +842,18 @@ export default {
background-color: #fff; background-color: #fff;
transition: all 0.3s; transition: all 0.3s;
overflow: hidden; overflow: hidden;
&:nth-child(4n) { &:nth-child(4n) {
margin-right: 0; margin-right: 0;
} }
img { img {
width: 100%; width: 100%;
height: 155px; height: 155px;
transition: 0.3s; transition: 0.3s;
object-fit: cover; object-fit: cover;
} }
.my-school { .my-school {
position: absolute; position: absolute;
top: 0; top: 0;
@ -875,9 +861,11 @@ export default {
width: 57px; width: 57px;
height: 22px; height: 22px;
} }
.texts { .texts {
padding: 10px; padding: 10px;
} }
.title { .title {
margin-bottom: 10px; margin-bottom: 10px;
color: #0b1d30; color: #0b1d30;
@ -889,6 +877,7 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.desc { .desc {
min-height: 34px; min-height: 34px;
color: #757f92; color: #757f92;
@ -899,11 +888,13 @@ export default {
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
overflow: hidden; overflow: hidden;
} }
.tags { .tags {
height: 24px; height: 24px;
margin-top: 10px; margin-top: 10px;
overflow: hidden; overflow: hidden;
} }
.tag { .tag {
margin-right: 8px; margin-right: 8px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
@ -911,6 +902,7 @@ export default {
background-color: #f9f9f9; background-color: #f9f9f9;
border: 0; border: 0;
} }
.type { .type {
display: inline-block; display: inline-block;
padding: 4px 11px; padding: 4px 11px;
@ -919,30 +911,36 @@ export default {
border: 1px solid #dadada; border: 1px solid #dadada;
border-radius: 20px; border-radius: 20px;
} }
.metas { .metas {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 10px; margin-top: 10px;
&.not-selected { &.not-selected {
justify-content: flex-end; justify-content: flex-end;
} }
} }
.meta { .meta {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color: #b5bfd5; color: #b5bfd5;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-size: 12px; font-size: 12px;
.icon { .icon {
width: 14px; width: 14px;
max-height: 14px; max-height: 14px;
margin-right: 3px; margin-right: 3px;
} }
} }
&:hover { &:hover {
box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12),
0px 1px 2px -2px rgba(142, 123, 253, 0.16); 0px 1px 2px -2px rgba(142, 123, 253, 0.16);
img { img {
transform: scale(1.05); transform: scale(1.05);
} }
@ -957,18 +955,22 @@ export default {
text-align: center; text-align: center;
line-height: 17px; line-height: 17px;
background-color: #0f1d2e; background-color: #0f1d2e;
span { span {
margin-right: 20px; margin-right: 20px;
color: #757f8a; color: #757f8a;
} }
a { a {
color: #757f8a; color: #757f8a;
font-size: 12px; font-size: 12px;
&:hover { &:hover {
color: #c7c7c7; color: #c7c7c7;
} }
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.wrap { .wrap {
.carousel { .carousel {
@ -976,15 +978,19 @@ export default {
margin-right: 20px; margin-right: 20px;
} }
} }
.inner { .inner {
width: 90%; width: 90%;
} }
.type-wrap { .type-wrap {
flex-direction: column; flex-direction: column;
} }
.search { .search {
margin-top: 20px; margin-top: 20px;
} }
.filter { .filter {
.vals { .vals {
width: calc(100% - 100px); width: calc(100% - 100px);
@ -992,40 +998,49 @@ export default {
} }
} }
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
.wrap { .wrap {
.carousel { .carousel {
.text-wrap { .text-wrap {
top: 49%; top: 49%;
} }
h6 { h6 {
font-size: 1.8rem; font-size: 1.8rem;
} }
.sub { .sub {
font-size: 1.3rem; font-size: 1.3rem;
} }
} }
.intro { .intro {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
li { li {
flex: 1; flex: 1;
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
.type-wrap { .type-wrap {
.tab-wrap { .tab-wrap {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
.tab { .tab {
margin-top: 10px; margin-top: 10px;
} }
} }
.courses { .courses {
li { li {
width: calc((100% - 22px) / 2); width: calc((100% - 22px) / 2);
&:nth-child(2n) { &:nth-child(2n) {
margin-right: 0; margin-right: 0;
} }
@ -1033,42 +1048,51 @@ export default {
} }
} }
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.wrap { .wrap {
/deep/.carousel { /deep/.carousel {
.el-carousel__container { .el-carousel__container {
height: 240px !important; height: 240px !important;
} }
.text-wrap { .text-wrap {
left: 20px; left: 20px;
} }
.qrcode { .qrcode {
width: 80px; width: 80px;
height: 80px; height: 80px;
} }
h6 { h6 {
font-size: 1.4rem; font-size: 1.4rem;
} }
.sub { .sub {
font-size: 1rem; font-size: 1rem;
} }
} }
.type-wrap { .type-wrap {
.tab-con { .tab-con {
max-width: 100%; max-width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
overflow: auto; overflow: auto;
} }
.tab { .tab {
li { li {
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
} }
.search { .search {
width: 100%; width: 100%;
margin-top: 0; margin-top: 0;
} }
.courses { .courses {
li { li {
width: 100%; width: 100%;

@ -1,126 +1,78 @@
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="inner"> <div class="inner">
<Breadcrumb ref="breadcrumb" <Breadcrumb ref="breadcrumb" :data.sync="routes" />
:data.sync="routes" />
<div class="top"> <div class="top">
<el-carousel class="pics fadeInLeft" <el-carousel class="pics fadeInLeft" :interval="6000" height="278px"
:interval="6000" :arrow="form.pics.length > 1 ? 'hover' : 'never'" :indicator-position="form.pics.length > 1 ? '' : 'none'">
height="278px" <el-carousel-item v-for="(item, i) in form.pics" :key="i">
:arrow="form.pics.length > 1 ? 'hover' : 'never'" <el-image class="pic" :src="item" :preview-src-list="form.pics">
:indicator-position="form.pics.length > 1 ? '' : 'none'">
<el-carousel-item v-for="(item, i) in form.pics"
:key="i">
<el-image class="pic"
:src="item"
:preview-src-list="form.pics">
</el-image> </el-image>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<div class="right fadeInRight" <div class="right fadeInRight" id="fields">
id="fields">
<h6>{{ form.mall.productName }}</h6> <h6>{{ form.mall.productName }}</h6>
<div v-if="isCourse" <div v-if="isCourse" class="meta">
class="meta">
<span class="val">{{ form.numberOfExperimentalItems }}</span> 个实验项目&emsp;&emsp; <span class="val">{{ form.numberOfExperimentalItems }}</span> 个实验项目&emsp;&emsp;
已有 <span class="val">{{ form.goodsRes.learningCount }}</span>人学过 已有 <span class="val">{{ form.goodsRes.learningCount }}</span>人学过
</div> </div>
<div class="des" <div class="des" v-html="form.mall.productIntroduction"></div>
v-html="form.mall.productIntroduction"></div>
<div class="fields"> <div class="fields">
<div class="field"> <div class="field">
<img src="@/assets/images/product/1.png" <img src="@/assets/images/product/1.png" alt=""> 适用专业
alt=""> 适用专业 <el-tooltip class="text" effect="dark" :visible-arrow="false" :content="form.goodsRes.professionalName"
<el-tooltip class="text"
effect="dark"
:visible-arrow="false"
:content="form.goodsRes.professionalName"
placement="bottom"> placement="bottom">
<div> <div>
{{ form.goodsRes.professionalName }} {{ form.goodsRes.professionalName }}
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div v-if="form.mall.applicationScenario" <div v-if="form.mall.applicationScenario" class="field">
class="field"> <img src="@/assets/images/product/2.png" alt=""> 适用场景
<img src="@/assets/images/product/2.png"
alt=""> 适用场景
<div class="text">{{ form.mall.applicationScenario }}</div> <div class="text">{{ form.mall.applicationScenario }}</div>
</div> </div>
<div v-if="form.mall.matchingCourse" <div v-if="form.mall.matchingCourse" class="field">
class="field"> <img src="@/assets/images/product/3.png" alt=""> 匹配课程
<img src="@/assets/images/product/3.png" <el-tooltip class="text" effect="dark" :visible-arrow="false" :content="form.mall.matchingCourse"
alt=""> 匹配课程
<el-tooltip class="text"
effect="dark"
:visible-arrow="false"
:content="form.mall.matchingCourse"
placement="bottom"> placement="bottom">
<div class="text"> <div class="text">
{{ form.mall.matchingCourse }} {{ form.mall.matchingCourse }}
</div> </div>
</el-tooltip> </el-tooltip>
</div> </div>
<div v-if="form.mall.courseHours" <div v-if="form.mall.courseHours" class="field">
class="field"> <img src="@/assets/images/product/4.png" alt=""> 预计课时
<img src="@/assets/images/product/4.png"
alt=""> 预计课时
<div class="text">{{ form.mall.courseHours }}</div> <div class="text">{{ form.mall.courseHours }}</div>
</div> </div>
<div v-if="form.goodsRes.typeName" <div v-if="form.goodsRes.typeName" class="field">
class="field"> <img src="@/assets/images/product/5.png" alt=""> 产品类型
<img src="@/assets/images/product/5.png"
alt=""> 产品类型
<div class="text">{{ form.goodsRes.typeName }}</div> <div class="text">{{ form.goodsRes.typeName }}</div>
</div> </div>
</div> </div>
<button v-if="!GTA" <button v-if="!GTA" class="btn" @click="showQrcode">会员价采购</button>
class="btn"
@click="showQrcode">会员价采购</button>
</div> </div>
</div> </div>
<div class="course" <div class="course" id="part0">
id="part0">
<div class="detail"> <div class="detail">
<ul class="tab fadeInDown"> <ul class="tab">
<li v-for="(tab, i) in tabs" <li v-for="(tab, i) in tabs" :key="i" :class="{ active: curTab === tab.id }" @click="tabChange(tab)">{{
:key="i" tab.name }}</li>
:class="{active: curTab === tab.id}"
@click="tabChange(tab)">{{ tab.name }}</li>
</ul> </ul>
<div class="courses fadeInUp"> <div class="courses fadeInUp">
<div class="des" <div class="des" v-html="form.mall.detailedIntroduction"></div>
v-html="form.mall.detailedIntroduction"></div> <div class="chapter" id="part1" v-for="(item, i) in chapterList" :key="i">
<div class="chapter"
id="part1"
v-for="(item, i) in chapterList"
:key="i">
<div class="chapterName">{{ item.name }}</div> <div class="chapterName">{{ item.name }}</div>
<div class="section" <div class="section" v-if="item.subsectionList.length">
v-if="item.subsectionList.length"> <div v-for="(section, j) in item.subsectionList" :key="j">
<div v-for="(section, j) in item.subsectionList" <div class="sectionName" :title="section.name">
:key="j">
<div class="sectionName"
:title="section.name">
<div class="val"> <div class="val">
<img v-if="section.fileType === 'pptx'" <img v-if="section.fileType === 'pptx'" src="@/assets/images/exts/ppt.png" alt="">
src="@/assets/images/exts/ppt.png" <img v-else-if="section.fileType === 'mp4'" src="@/assets/images/exts/video.png" alt="">
alt="">
<img v-else-if="section.fileType === 'mp4'"
src="@/assets/images/exts/video.png"
alt="">
<img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" <img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'"
src="@/assets/images/exts/word.png" src="@/assets/images/exts/word.png" alt="">
alt=""> <img v-else-if="section.fileType === 'txt'" src="@/assets/images/exts/txt.png" alt="">
<img v-else-if="section.fileType === 'txt'" <img v-else-if="section.fileType === 'pdf'" src="@/assets/images/exts/pdf.png" alt="">
src="@/assets/images/exts/txt.png" <img v-else src="@/assets/images/exts/pic.png" alt="">
alt="">
<img v-else-if="section.fileType === 'pdf'"
src="@/assets/images/exts/pdf.png"
alt="">
<img v-else
src="@/assets/images/exts/pic.png"
alt="">
{{ section.name }} {{ section.name }}
</div> </div>
</div> </div>
@ -132,33 +84,20 @@
<div class="products"> <div class="products">
<h6 class="fadeInUp">热门产品推荐</h6> <h6 class="fadeInUp">热门产品推荐</h6>
<ul class="product fadeInDown"> <ul class="product fadeInDown">
<li v-for="(item, i) in hots" <li v-for="(item, i) in hots" :key="i" @click="toDetail(item.mallId)">
:key="i" <img :src="item.coverDrawing" alt="" />
@click="toDetail(item.mallId)"> <img v-if="item.logoOfOurSchool" class="my-school" src="@/assets/images/my-school.png" alt="">
<img :src="item.coverDrawing"
alt="" />
<img v-if="item.logoOfOurSchool"
class="my-school"
src="@/assets/images/my-school.png"
alt="">
<div class="texts"> <div class="texts">
<div class="title">{{ item.productName }}</div> <div class="title">{{ item.productName }}</div>
<div :class="['desc', {'not-tag': !item.tagsName}]" <div :class="['desc', { 'not-tag': !item.tagsName }]" v-html="item.productIntroduction"></div>
v-html="item.productIntroduction"></div> <div v-if="item.tagsName" class="tags">
<div v-if="item.tagsName" <el-tag v-for="(tag, i) in item.tagsName.split(',')" :key="i" class="tag">{{ tag }}</el-tag>
class="tags">
<el-tag v-for="(tag, i) in item.tagsName.split(',')"
:key="i"
class="tag">{{ tag }}</el-tag>
</div> </div>
<div class="metas"> <div class="metas">
<el-tag v-if="item.selected" <el-tag v-if="item.selected" type="danger" effect="dark">
type="danger"
effect="dark">
官方精选 官方精选
</el-tag> </el-tag>
<div v-if="item.isCourse" <div v-if="item.isCourse" class="meta">{{ item.learningCount }}人学过</div>
class="meta">{{ item.learningCount }}人学过</div>
</div> </div>
</div> </div>
</li> </li>
@ -168,34 +107,18 @@
</div> </div>
<!-- 选择链接 --> <!-- 选择链接 -->
<el-dialog title="请选择链接" <el-dialog title="请选择链接" :visible.sync="linkVisible" width="420px" center :close-on-click-modal="false">
:visible.sync="linkVisible" <div v-if="withLink" class="buy">
width="420px" <div v-for="(link, i) in form.mallNonAssociatedLinks" :key="i" class="link-line">
center
:close-on-click-modal="false">
<div v-if="withLink"
class="buy">
<div v-for="(link, i) in form.mallNonAssociatedLinks"
:key="i"
class="link-line">
{{ link.urlName }} {{ link.urlName }}
<a class="url" <a class="url" :href="link.url" target="_blank">{{ link.url }}</a>
:href="link.url"
target="_blank">{{ link.url }}</a>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog title="" <el-dialog title="" :visible.sync="qrcodeVisible" width="500px" center :top="qrcodeTop" custom-class="qrcode-dia">
:visible.sync="qrcodeVisible"
width="500px"
center
:top="qrcodeTop"
custom-class="qrcode-dia">
<div> <div>
<img width="100%" <img width="100%" src="@/assets/images/occupationlab.png" alt="">
src="@/assets/images/occupationlab.png"
alt="">
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
@ -480,41 +403,50 @@ export default {
background: url(../../../assets/images/product/bg1.png) 0 373px no-repeat, background: url(../../../assets/images/product/bg1.png) 0 373px no-repeat,
url(../../../assets/images/product/bg2.png) bottom right no-repeat; url(../../../assets/images/product/bg2.png) bottom right no-repeat;
background-color: #f3f6fa; background-color: #f3f6fa;
.inner { .inner {
width: 1146px; width: 1146px;
margin: 0 auto; margin: 0 auto;
} }
.top { .top {
display: flex; display: flex;
padding: 24px; padding: 24px;
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 10px;
.pics { .pics {
width: 484px; width: 484px;
margin-right: 20px; margin-right: 20px;
.pic { .pic {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 8px; border-radius: 8px;
} }
} }
.right { .right {
width: 592px; width: 592px;
overflow: hidden; overflow: hidden;
} }
h6 { h6 {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
color: #2e2d31; color: #2e2d31;
} }
.meta { .meta {
margin: 10px 0; margin: 10px 0;
font-size: 12px; font-size: 12px;
color: #2e2d31; color: #2e2d31;
.val { .val {
color: #007eff; color: #007eff;
} }
} }
.des { .des {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 14px; font-size: 14px;
@ -522,26 +454,32 @@ export default {
line-height: 20px; line-height: 20px;
@include mul-ellipsis(3); @include mul-ellipsis(3);
} }
.field { .field {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin: 0 20px 10px 0; margin: 0 20px 10px 0;
font-size: 14px; font-size: 14px;
color: #2e2d31; color: #2e2d31;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
.label { .label {
color: #333; color: #333;
} }
.text { .text {
max-width: 160px; max-width: 160px;
@include ellipsis; @include ellipsis;
} }
img { img {
margin-right: 5px; margin-right: 5px;
} }
} }
.fields { .fields {
display: flex; display: flex;
// justify-content: space-between; // justify-content: space-between;
@ -550,6 +488,7 @@ export default {
margin: 10px 0 10px; margin: 10px 0 10px;
overflow: hidden; overflow: hidden;
} }
.btn { .btn {
width: 119px; width: 119px;
height: 46px; height: 46px;
@ -558,21 +497,25 @@ export default {
border-radius: 6px; border-radius: 6px;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
opacity: 0.9; opacity: 0.9;
} }
&:first-child { &:first-child {
margin-left: 11px; margin-left: 11px;
} }
} }
} }
.tab { .tab {
z-index: 100; z-index: 100;
position: sticky; position: sticky;
top: 20px; top: 90px;
display: flex; display: flex;
padding: 10px 10px 20px; padding: 10px 10px 20px;
background-color: #fff; background-color: #fff;
li { li {
position: relative; position: relative;
margin-right: 20px; margin-right: 20px;
@ -580,6 +523,7 @@ export default {
line-height: 25px; line-height: 25px;
color: #0b1d30; color: #0b1d30;
cursor: pointer; cursor: pointer;
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
@ -589,14 +533,17 @@ export default {
height: 4px; height: 4px;
transform: translateX(-50%); transform: translateX(-50%);
} }
&.active:after { &.active:after {
background-color: #007eff; background-color: #007eff;
} }
} }
} }
.course { .course {
display: flex; display: flex;
margin-top: 20px; margin-top: 20px;
.detail { .detail {
width: calc(100% - 294px); width: calc(100% - 294px);
padding: 20px 24px; padding: 20px 24px;
@ -604,35 +551,42 @@ export default {
border-radius: 10px; border-radius: 10px;
} }
} }
.courses { .courses {
padding-top: 10px; padding-top: 10px;
overflow: hidden; overflow: hidden;
/deep/.des { /deep/.des {
div, div,
p, p,
span { span {
font-family: PingFangSC-Regular !important; font-family: PingFangSC-Regular !important;
} }
img { img {
max-width: 100%; max-width: 100%;
object-fit: cover; object-fit: cover;
} }
} }
.chapters { .chapters {
margin-top: 16px; margin-top: 16px;
max-height: calc(100% - 53px); max-height: calc(100% - 53px);
overflow: auto; overflow: auto;
} }
.chapter { .chapter {
padding-top: 60px; padding-top: 60px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.chapterName { .chapterName {
padding: 0 12px; padding: 0 12px;
margin-bottom: 15px; margin-bottom: 15px;
color: #333; color: #333;
font-size: 14px; font-size: 14px;
} }
.sectionName { .sectionName {
position: relative; position: relative;
display: flex; display: flex;
@ -642,33 +596,41 @@ export default {
color: #666; color: #666;
border-radius: 8px; border-radius: 8px;
@include ellipsis; @include ellipsis;
img { img {
margin-right: 8px; margin-right: 8px;
} }
&:hover { &:hover {
color: #007eff; color: #007eff;
background: #f6fbff; background: #f6fbff;
} }
.val { .val {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
.icon { .icon {
font-size: 18px; font-size: 18px;
color: #666; color: #666;
} }
} }
} }
.products { .products {
width: 270px; width: 270px;
margin-left: 24px; margin-left: 24px;
&>h6 { &>h6 {
font-size: 14px; font-size: 14px;
color: #0b1d30; color: #0b1d30;
} }
} }
.product { .product {
margin-top: 11px; margin-top: 11px;
li { li {
position: relative; position: relative;
margin-bottom: 15px; margin-bottom: 15px;
@ -677,12 +639,14 @@ export default {
background-color: #fff; background-color: #fff;
transition: all 0.3s; transition: all 0.3s;
overflow: hidden; overflow: hidden;
img { img {
width: 100%; width: 100%;
height: 140px; height: 140px;
transition: 0.3s; transition: 0.3s;
object-fit: cover; object-fit: cover;
} }
.my-school { .my-school {
position: absolute; position: absolute;
top: 0; top: 0;
@ -690,9 +654,11 @@ export default {
width: 57px; width: 57px;
height: 22px; height: 22px;
} }
.texts { .texts {
padding: 10px; padding: 10px;
} }
.title { .title {
margin-bottom: 10px; margin-bottom: 10px;
color: #0b1d30; color: #0b1d30;
@ -704,6 +670,7 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.desc { .desc {
min-height: 34px; min-height: 34px;
color: #757f92; color: #757f92;
@ -712,19 +679,23 @@ export default {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
overflow: hidden; overflow: hidden;
&.not-tag { &.not-tag {
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
} }
} }
.tags { .tags {
margin-top: 10px; margin-top: 10px;
} }
.tag { .tag {
margin-right: 8px; margin-right: 8px;
color: #007eff; color: #007eff;
background-color: #f9f9f9; background-color: #f9f9f9;
border: 0; border: 0;
} }
.type { .type {
display: inline-block; display: inline-block;
padding: 4px 11px; padding: 4px 11px;
@ -733,26 +704,31 @@ export default {
border: 1px solid #dadada; border: 1px solid #dadada;
border-radius: 20px; border-radius: 20px;
} }
.metas { .metas {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 10px; margin-top: 10px;
} }
.meta { .meta {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color: #b5bfd5; color: #b5bfd5;
font-size: 12px; font-size: 12px;
.icon { .icon {
width: 14px; width: 14px;
max-height: 14px; max-height: 14px;
margin-right: 3px; margin-right: 3px;
} }
} }
&:hover { &:hover {
box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12), box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12),
0px 1px 2px -2px rgba(142, 123, 253, 0.16); 0px 1px 2px -2px rgba(142, 123, 253, 0.16);
img { img {
transform: scale(1.05); transform: scale(1.05);
} }
@ -760,56 +736,71 @@ export default {
} }
} }
} }
.link-line { .link-line {
margin: 5px 0; margin: 5px 0;
.url { .url {
color: #007eff; color: #007eff;
text-decoration: underline; text-decoration: underline;
} }
} }
.buy { .buy {
text-align: center; text-align: center;
.tips { .tips {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 14px; font-size: 14px;
} }
img { img {
width: 85%; width: 85%;
} }
} }
/deep/.qrcode-dia { /deep/.qrcode-dia {
.el-dialog__header, .el-dialog__header,
.el-dialog__body { .el-dialog__body {
padding: 0; padding: 0;
} }
.el-dialog__headerbtn .el-dialog__close { .el-dialog__headerbtn .el-dialog__close {
color: #fff; color: #fff;
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.wrap { .wrap {
.inner { .inner {
width: 100%; width: 100%;
} }
.top { .top {
flex-direction: column; flex-direction: column;
.pics { .pics {
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
} }
.el-image__preview { .el-image__preview {
object-fit: cover; object-fit: cover;
} }
.right { .right {
width: 100%; width: 100%;
} }
} }
.course { .course {
flex-direction: column; flex-direction: column;
.detail { .detail {
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
} }
.products { .products {
width: 100%; width: 100%;
margin-left: 0; margin-left: 0;
@ -817,6 +808,7 @@ export default {
} }
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.wrap { .wrap {
.tab { .tab {

Loading…
Cancel
Save