提交 1cf4ea4c authored 作者: 王鹏飞's avatar 王鹏飞

update

上级 9d69c36f
...@@ -26,7 +26,7 @@ export default { ...@@ -26,7 +26,7 @@ export default {
// 每页多少条数据 // 每页多少条数据
limit: { type: Number, default: 20 }, limit: { type: Number, default: 20 },
// 页面跳转地址 // 页面跳转地址
to: { type: Function } to: { type: [Function, String, Object] }
}, },
data() { data() {
return { return {
......
<template> <template>
<div class="article-item"> <div class="article-item">
<new-link :data="data" v-bind="$attrs"> <app-link :data="data" v-bind="$attrs">
<div class="article-item-inner"> <div class="article-item-inner">
<img :src="data.web_img_uri" class="article-item-pic" /> <img :src="data.web_img_uri" class="article-item-pic" />
<div class="article-item-content"> <div class="article-item-content">
...@@ -9,13 +9,15 @@ ...@@ -9,13 +9,15 @@
<div class="article-item-content__text">{{ data.abstract }}</div> <div class="article-item-content__text">{{ data.abstract }}</div>
</div> </div>
</div> </div>
</new-link> </app-link>
</div> </div>
</template> </template>
<script> <script>
import AppLink from '@/components/Link'
export default { export default {
name: 'ArticleItem', name: 'ArticleItem',
components: { AppLink },
props: { data: { type: Object, required: true } }, props: { data: { type: Object, required: true } },
methods: { methods: {
formatDate(value) { formatDate(value) {
......
<template>
<div class="foot-mian">
<div class="foot-box">
<div class="foot-content">
<div class="left-content">
<div>
<a href="http://jsj.moe.gov.cn" target="_blank" >
{{ $t('foot.link1') }}
</a>
</div>
<div>
<a href="http://jsj.moe.gov.cn" target="_blank" >
{{ $t('foot.link2') }}
</a>
</div>
<div>
<a href="http://www.pbcsf.tsinghua.edu.cn" target="_blank" >
{{ $t('foot.link3') }}
</a>
</div>
<div>
<a href="http://www.pbcsf.tsinghua.edu.cn" target="_blank" >
{{ $t('foot.link4') }}
</a>
</div>
<div>
<a href="http://www.ezijing.com" target="_blank" >
{{ $t('foot.link5') }}
</a>
</div>
<!-- <div>
合作大学官网
</div> -->
</div>
<div class="center-content">
<div class="address" v-html="$t('foot.address')"></div>
<div class="phone" v-html="$t('foot.contact')"></div>
<div class="mail" v-html="$t('foot.email')"></div>
</div>
<div class="right-content">
<img src="https://zws-imgs-pub.ezijing.com/static/public/734d8fd7b853b838e5e029049e2d9db3.png" alt="" class="code">
<div class="tips-txt">
<img src="https://zws-imgs-pub.ezijing.com/static/public/184235d9f6edbb39d52fc6f77339ff5b.png" alt="">
<div class="txt">{{ $t('foot.weChat') }}</div>
</div>
</div>
</div>
<!-- <div class="links">
友情链接:中国人民银行 中国涉外监管网 中国银行协会 中国证券投资基金业协会
</div> -->
</div>
<div class="copyright" style="height: 40px;line-height: 40px;color: rgba(153, 153, 153, 1);background: #fff;">
<div class="inner" style="width: 100%;justify-content: center;display: flex;">
<p style="font-size: 12px;">Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆(北京)教育科技股份有限公司</p>
<a target="_blank" href="https://tsm.miit.gov.cn/dxxzsp/" style="color: rgba(153, 153, 153, 1);text-decoration:none;margin-left: 10px;">
<p style="font-size: 12px;">京ICP证150431号</p>
</a>
<a target="_blank" class="record" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681"
style="color: rgba(153, 153, 153, 1);text-decoration:none;align-items: center;display: flex;margin-right: 5px;">
<img src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png" alt=""
style="width: 20px;height: 20px;margin: 0 6px;display: block;">
<p style="font-size: 12px;">安备 11010802023681号</p>
</a>
<a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index" style="color: rgba(153, 153, 153, 1);text-decoration:none;">
<p style="font-size: 12px;">京ICP备15016866号-1</p>
</a>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.foot-mian{
width: 100%;
background: rgba(170, 25, 65, 1);
.links{
padding-top: 12px;
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #FFFFFF;
opacity: 0.6;
width: 1200px;
margin: 0 auto;
}
.foot-box{
padding: 80px 0 35px;
width: 1200px;
margin: 0 auto;
}
.foot-content{
// height: 300px;
display: flex;
.left-content{
div{
opacity: 0.7;
font-size: 22px;
font-weight: 300;
line-height: 50px;
color: #FFFFFF;
text-decoration: underline;
letter-spacing: 3px;
}
}
.center-content{
font-size: 16px;
line-height: 32px;
color: #FFFFFF;
letter-spacing: 3px;
opacity: 0.7;
margin-left: 88px;
}
.right-content{
margin-left: auto;
padding-top: 20px;
.code{
width: 120px;
display: block;
}
.tips-txt{
padding-top: 20px;
display: flex;
align-items: center;
justify-content: center;
img{
width: 21px;
display: block;
}
.txt{
font-size: 14px;
color: #FFFFFF;
margin-left: 7px;
}
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="head-mian">
<div class="color-bar"></div>
<div class="head-top-content">
<div class="max-width-content">
<app-link :item="{ path: '/' }">
<img src="https://zws-imgs-pub.ezijing.com/static/public/307f688850f8308a5c944bd129436fe0.png" />
</app-link>
<div class="user" v-if="user.id">
<span>{{ user.realname || user.nickname }}</span
><em>|</em><span class="logout" @click="logout">{{ $t('menu.out') }}</span>
</div>
<div class="login-btn-box" v-else>
<div class="login"><a :href="loginURL">{{ $t('menu.fastLogin') }}</a></div>
<div class="register"><a :href="registerURL">{{ $t('menu.register') }}</a></div>
</div>
<div class="language">
<span @click="switchLocale('zh-CN')">中文</span> / <span @click="switchLocale('en-US')">EN</span>
</div>
</div>
</div>
<div class="head-nav-content max-width-content">
<app-menu></app-menu>
<div class="search-box"></div>
</div>
</div>
</template>
<script>
import AppLink from '@/components/Link'
import AppMenu from '@/components/Menu'
export default {
components: {
AppMenu,
AppLink
},
data() {
return {}
},
methods: {
logout() {
this.$store.dispatch('logout').then(() => {
this.$router.replace('/')
})
},
switchLocale(locale) {
this.$i18n.locale = locale
this.$cookies.set('lang', locale)
process.client && location.reload()
}
},
computed: {
user() {
return this.$store.state.user || {}
},
loginURL() {
return process.client
? `${process.env.loginURL}/login/index?redirect_uri=${encodeURIComponent(
location.origin + this.$route.fullPath
)}`
: ''
},
registerURL() {
return process.client
? `${process.env.loginURL}/register?redirect_uri=${encodeURIComponent(location.origin + this.$route.fullPath)}`
: ''
}
}
}
</script>
<style lang="scss" scoped>
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.head-mian {
width: 100%;
background: #fff;
.color-bar {
height: 10px;
background: #aa1941;
}
.head-top-content {
// width: 1200px;
// margin: 0 auto;
border: 1px solid #ebebeb;
padding: 23px 0 22px;
.max-width-content {
display: flex;
align-items: center;
img {
height: 55px;
cursor: pointer;
display: block;
}
.user {
margin-left: auto;
font-size: 14px;
em {
font-size: 14px;
font-style: normal;
padding: 0 14px;
}
.logout {
cursor: pointer;
}
}
.login-btn-box {
margin-left: auto;
display: flex;
div {
width: 72px;
height: 24px;
box-sizing: border-box;
text-align: center;
line-height: 24px;
font-size: 12px;
border-radius: 6px;
margin-left: 10px;
cursor: pointer;
}
.login {
background: #aa1941;
color: #fff;
}
.register {
color: #333333;
border: 1px solid #eaeaea;
}
}
.language {
margin-left: 24px;
font-size: 14px;
color: #333;
cursor: pointer;
}
}
}
.max-width-content {
width: 1200px;
margin: 0 auto;
}
.head-nav-content {
height: 72px;
display: flex;
align-items: center;
}
}
</style>
<template> <template>
<div class="link-content"> <div>
<template v-if="item.news"> <!-- 外部链接跳转 -->
<a <a :href="href" :target="target" v-if="href"><slot /></a>
:target="item.news.data.uri !== '' ? '_blank' : '_self'" <!-- 站内跳转 -->
:href="item.news.data.uri !== '' ? item.news.data.uri : `${item.news.path}/${item.news.data.id}`"> <nuxt-link :to="path" v-else-if="path"><slot /></nuxt-link>
<slot /> <!-- 事件 -->
</a> <div v-else-if="item.onClick" @click="item.onClick"><slot /></div>
</template> <template v-else><slot /></template>
<template v-else>
<nuxt-link
:to="item.path">
<slot />
</nuxt-link>
</template>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { item: { type: Object } } name: 'Link',
props: {
data: { type: Object, default: () => ({}) },
to: { type: [Function, String, Object] },
target: { type: String, default: '_blnak' }
},
computed: {
href() {
return this.data.href || this.data.uri
},
path() {
if (Array.isArray(this.to)) {
return this.to(this.data)
}
return this.data.path || this.to
}
}
} }
</script> </script>
<style lang="scss" scoped>
.link-content{
height: 100%;
}
</style>
<template>
<ul class="nav-item-box" @mouseleave="navLeave">
<template v-for="(item, index) in navData">
<li :key="index">
<div :class="getNameActive(item)">
<template v-if="!item.path">
<template v-if="item.click">
<span @click="showEnroll">{{ item.name }}</span>
</template>
<template v-else>
{{ item.name }}
</template>
</template>
<template v-else>
<nuxt-link :to="item.path">{{ item.name }}</nuxt-link>
</template>
</div>
<div class="child-item" v-if="item.childern">
<div class="one-level">
<template v-for="(level2Item, level2Index) in item.childern">
<div
:class="$route.path === level2Item.path || level2Item.isShow ? 'li active' : 'li'"
:key="level2Index + 'level2'"
@mouseenter="levelShow(level2Item)"
@mouseleave="levelShow(level2Item, 'out')"
>
<app-link :item="{
path: level2Item.path
}">
<div class="name">
{{ level2Item.name }}
</div>
<div class="el-icon-arrow-right" v-if="level2Item.childern"></div>
</app-link>
</div>
</template>
</div>
</div>
</li>
</template>
</ul>
</template>
<script>
import AppLink from '@/components/Link'
export default {
name: 'AppMenu',
components: { AppLink },
data() {
return {
navData: [
{
name: this.$t('menu.project'),
path: '/project-intro/bg',
childern: [
{ name: this.$t('menu.projectChild.bg'), path: '/project-intro/bg' },
{ name: this.$t('menu.projectChild.feature'), path: '/project-intro/charac' },
{ name: this.$t('menu.projectChild.cert'), path: '/project-intro/certificate' }
]
},
{
name: this.$t('menu.course'),
path: '/about/course',
childern: [
{ name: this.$t('menu.courseChild.set'), path: '/about/course' },
{ name: this.$t('menu.courseChild.teachers'), path: '/about/teacher' }
]
},
{
name: this.$t('menu.news'),
path: '/news/hot',
childern: [
{ name: this.$t('menu.newsChild.hot'), path: '/news/hot' },
{ name: this.$t('menu.newsChild.interview'), path: '/news/interview' }
]
},
{
name: this.$t('menu.recruit'),
path: '/apply/relevant',
childern: [
{ name: this.$t('menu.recruitChild.apply'), path: '/apply/relevant' },
{ name: this.$t('menu.recruitChild.cost'), path: '/apply/support' },
{ name: this.$t('menu.recruitChild.problem'), path: '/apply/problem' }
]
},
{
name: this.$t('menu.alumni'),
path: '/alumni/outstanding',
childern: [
{ name: this.$t('menu.alumniChild.outstanding'), path: '/alumni/outstanding' },
{ name: this.$t('menu.alumniChild.share'), path: '/alumni/sharing' }
]
},
{
name: this.$t('menu.enroll'),
path: '/my'
}
],
time: null
}
},
methods: {
navLeave() {
this.navData.map(item => {
if (item.childern) {
item.childern.map(cItem => {
cItem.isShow = false
})
}
})
this.$forceUpdate()
},
levelShow(item, isOut) {
if (item.childern) {
if (isOut) {
clearTimeout(this.time)
this.time = setTimeout(() => {
item.isShow = false
}, 500)
return
}
this.navLeave()
item.isShow = true
} else {
this.navLeave()
}
}
},
computed: {
getNameActive() {
return item => {
const currentPath = this.$route.path
if (currentPath.includes(item.path)) {
return 'name active'
} else {
let className = 'name'
if (item.childern) {
item.childern.map(cData => {
currentPath.includes(cData.path) && (className = 'name active')
})
}
return className
}
}
}
}
}
</script>
<style lang="scss" scoped>
.nav-item-box {
padding-left: 11px;
display: flex;
li {
position: relative;
margin-right: 60px;
.name {
line-height: 72px;
font-size: 22px;
color: #333333;
cursor: pointer;
a {
color: #333333;
font-size: 22px;
text-decoration: none;
}
&.active {
font-weight: 500;
color: #aa1941;
a {
// font-weight: 500;
color: #aa1941;
}
}
}
&:hover {
.name {
color: #aa1941;
font-weight: 500;
a {
// font-weight: 500;
color: #aa1941;
}
}
.child-item {
.one-level {
display: block;
}
}
}
.child-item {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
position: absolute;
top: 72px;
left: -10px;
display: flex;
background: #fff;
z-index: 999;
.one-level {
padding: 36px 24px 0;
border-top: 4px solid rgba(170, 25, 65, 1);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
display: none;
.li {
margin-bottom: 36px;
display: flex;
justify-content: space-between;
&.active {
.name {
color: rgba(170, 25, 65, 1);
}
}
.name {
font-weight: 400;
line-height: 100%;
color: #333333;
font-size: 16px;
white-space: nowrap;
a {
color: #333333;
font-size: 16px;
}
}
.el-icon-arrow-right {
color: rgba(51, 51, 51, 1);
margin-left: 15px;
}
&:hover {
.name {
color: rgba(170, 25, 65, 1);
a {
color: rgba(170, 25, 65, 1);
}
}
.el-icon-arrow-right {
color: rgba(170, 25, 65, 1);
}
}
}
}
.two-level {
pointer-events: auto;
padding: 34px 41px 0 24px;
.name {
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #333333;
margin-bottom: 36px;
white-space: nowrap;
&:hover {
color: rgba(170, 25, 65, 1);
}
a {
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: #333333;
margin-bottom: 36px;
white-space: nowrap;
}
}
}
}
}
}
</style>
<template>
<a :href="data.uri" :target="target" v-if="data.uri">
<slot />
</a>
<nuxt-link :to="to(data)" v-else-if="to">
<slot />
</nuxt-link>
<div v-else>
<slot />
</div>
</template>
<script>
export default {
name: 'Link',
props: {
data: { type: Object, required: true },
to: { type: Function },
target: { type: String, default: '_blnak' }
}
}
</script>
<template>
<div>
<!-- 外部链接跳转 -->
<a :href="item.href" target="_blank" v-if="item.href"><slot /></a>
<!-- 站内跳转 -->
<nuxt-link :to="item.path" v-else-if="item.path"><slot /></nuxt-link>
<!-- 事件 -->
<div v-else-if="item.onClick" @click="item.onClick"><slot /></div>
<template v-else><slot /></template>
</div>
</template>
<script>
export default {
props: { item: { type: Object } }
}
</script>
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<h2 class="hot-search__title">热门搜索</h2> <h2 class="hot-search__title">热门搜索</h2>
<ul class="hot-search__list"> <ul class="hot-search__list">
<li v-for="(item, index) in hotList" :key="index"> <li v-for="(item, index) in hotList" :key="index">
<app-link :item="item">{{ item.name }}</app-link> <app-link :data="item">{{ item.name }}</app-link>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -12,9 +12,7 @@ ...@@ -12,9 +12,7 @@
</template> </template>
<script> <script>
import AppLink from './Link'
export default { export default {
components: { AppLink },
data() { data() {
return { return {
hotList: [ hotList: [
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<li class="tree-item"> <li class="tree-item">
<div class="cell" :class="{ bold: isFolder }" @click="toggle"> <div class="cell" :class="{ bold: isFolder }" @click="toggle">
<div class="cell-title"> <div class="cell-title">
<app-link :item="item">{{ item.name }}</app-link> <app-link :data="item">{{ item.name }}</app-link>
</div> </div>
<div class="cell-icon" v-if="isFolder"> <div class="cell-icon" v-if="isFolder">
<van-icon name="arrow-up" v-if="isOpen" /> <van-icon name="arrow-up" v-if="isOpen" />
...@@ -17,12 +17,11 @@ ...@@ -17,12 +17,11 @@
<script> <script>
import AppLink from './Link'
import TreeItem from './TreeItem' import TreeItem from './TreeItem'
export default { export default {
name: 'TreeItem', name: 'TreeItem',
props: { item: Object }, props: { item: Object },
components: { AppLink, TreeItem }, components: { TreeItem },
data: function () { data: function () {
return { return {
isOpen: false isOpen: false
......
...@@ -2,9 +2,11 @@ ...@@ -2,9 +2,11 @@
<div :class="isMobile ? 'is-h5' : 'is-pc'"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="common-content-box"> <div class="common-content-box">
<card :title="$t('home.problem.title')"> <card :title="$t('home.problem.title')">
<template #header-aside><nuxt-link to="/apply/problem">{{ $t('viewMore') }}</nuxt-link></template> <template #header-aside
><nuxt-link to="/apply/problem">{{ $t('viewMore') }}</nuxt-link></template
>
<div class="content-mian"> <div class="content-mian">
<app-link :item="{ path: '/news/hot' }"> <app-link to="/apply/problem">
<div class="list-box"> <div class="list-box">
<ul> <ul>
<li v-for="(item, index) in problem.itemLeft" :key="index"> <li v-for="(item, index) in problem.itemLeft" :key="index">
...@@ -21,11 +23,7 @@ ...@@ -21,11 +23,7 @@
</div> </div>
</app-link> </app-link>
<div class="msg-box"> <div class="msg-box">
<el-input <el-input type="textarea" placeholder="请输入内容" v-model="textarea"> </el-input>
type="textarea"
placeholder="请输入内容"
v-model="textarea">
</el-input>
<div class="btn">在线留言</div> <div class="btn">在线留言</div>
</div> </div>
</div> </div>
...@@ -43,7 +41,7 @@ export default { ...@@ -43,7 +41,7 @@ export default {
Card, Card,
AppLink AppLink
}, },
data () { data() {
return { return {
problem: { problem: {
itemLeft: [ itemLeft: [
...@@ -73,75 +71,75 @@ export default { ...@@ -73,75 +71,75 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc{ .is-pc {
.common-content-box{ .common-content-box {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
padding-top: 77px; padding-top: 77px;
.content-mian{ .content-mian {
padding-top: 50px; padding-top: 50px;
.msg-box{ .msg-box {
padding-top: 40px; padding-top: 40px;
box-sizing: border-box; box-sizing: border-box;
height: 56px; height: 56px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
::v-deep{ ::v-deep {
.el-textarea__inner{ .el-textarea__inner {
background: none; background: none;
resize:none; resize: none;
} }
} }
.btn{ .btn {
width: 136px; width: 136px;
height: 36px; height: 36px;
background: #AA1941; background: #aa1941;
opacity: 1; opacity: 1;
border-radius: 4px; border-radius: 4px;
font-size: 18px; font-size: 18px;
line-height: 36px; line-height: 36px;
text-align: center; text-align: center;
color: #FFFFFF; color: #ffffff;
margin-left: 57px; margin-left: 57px;
cursor: pointer; cursor: pointer;
} }
} }
.list-box{ .list-box {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
ul{ ul {
&:nth-child(2){ &:nth-child(2) {
margin-left: 8px; margin-left: 8px;
} }
li{ li {
display: flex; display: flex;
align-items: center; align-items: center;
width: 600px; width: 600px;
height: 25px; height: 25px;
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
&:nth-child(even){ &:nth-child(even) {
.text{ .text {
background: none; background: none;
} }
} }
.icon{ .icon {
width: 7px; width: 7px;
height: 7px; height: 7px;
background: #AA1941; background: #aa1941;
border-radius: 50%; border-radius: 50%;
} }
.text{ .text {
overflow: hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 14px; font-size: 14px;
line-height: 25px; line-height: 25px;
color: #666666; color: #666666;
padding-left: 4px; padding-left: 4px;
width: 570px; width: 570px;
background: rgba(153, 153, 153, .2); background: rgba(153, 153, 153, 0.2);
margin-left: 15px; margin-left: 15px;
} }
} }
...@@ -150,67 +148,67 @@ export default { ...@@ -150,67 +148,67 @@ export default {
} }
} }
} }
.is-h5{ .is-h5 {
.common-content-box{ .common-content-box {
.content-mian{ .content-mian {
.msg-box{ .msg-box {
padding-top: .2rem; padding-top: 0.2rem;
box-sizing: border-box; box-sizing: border-box;
::v-deep{ ::v-deep {
.el-textarea__inner{ .el-textarea__inner {
background: none; background: none;
resize:none; resize: none;
} }
} }
input{ input {
height: .29rem; height: 0.29rem;
border: .01rem solid rgba(153, 153, 153, .2); border: 0.01rem solid rgba(153, 153, 153, 0.2);
margin-top: .05rem; margin-top: 0.05rem;
outline: none; outline: none;
width: 100%; width: 100%;
background: none; background: none;
padding-left: .2rem; padding-left: 0.2rem;
box-sizing: border-box; box-sizing: border-box;
font-size: 0.1rem; font-size: 0.1rem;
color: #999999; color: #999999;
} }
.btn{ .btn {
height: 0.24rem; height: 0.24rem;
background: #AA1941; background: #aa1941;
font-size: 0.12rem; font-size: 0.12rem;
text-align: center; text-align: center;
color: #FFFFFF; color: #ffffff;
margin-top: .1rem; margin-top: 0.1rem;
line-height: .24rem; line-height: 0.24rem;
} }
} }
.list-box{ .list-box {
ul{ ul {
li{ li {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.04rem 0 0.04rem 0; padding: 0.04rem 0 0.04rem 0;
&:nth-child(even){ &:nth-child(even) {
.text{ .text {
background: none; background: none;
} }
} }
.icon{ .icon {
width: 0.04rem; width: 0.04rem;
height: 0.04rem; height: 0.04rem;
background: #AA1941; background: #aa1941;
border-radius: 50%; border-radius: 50%;
} }
.text{ .text {
overflow: hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: .12rem; font-size: 0.12rem;
color: #666666; color: #666666;
padding-left: .02rem; padding-left: 0.02rem;
width: 100%; width: 100%;
background: rgba(153, 153, 153, .2); background: rgba(153, 153, 153, 0.2);
margin-left: .07rem; margin-left: 0.07rem;
} }
} }
} }
......
...@@ -2,10 +2,12 @@ ...@@ -2,10 +2,12 @@
<div :class="isMobile ? 'is-h5' : 'is-pc'"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="news-content-box"> <div class="news-content-box">
<card :title="$t('home.news.title')"> <card :title="$t('home.news.title')">
<template #header-aside><nuxt-link to="/news/hot">{{ $t('viewMore') }}</nuxt-link></template> <template #header-aside
><nuxt-link to="/news/hot">{{ $t('viewMore') }}</nuxt-link></template
>
<div class="content-box" v-if="Object.keys(listData.first).length"> <div class="content-box" v-if="Object.keys(listData.first).length">
<div class="news-left"> <div class="news-left">
<app-link :item="{ news: { data: listData.first, path: '/news/hot' } }"> <app-link :data="listData.first" :to="`/news/hot/${listData.first.id}`">
<img :src="listData.first.web_img_uri" alt="" /> <img :src="listData.first.web_img_uri" alt="" />
<div class="mantle-box"> <div class="mantle-box">
<div class="tit" v-if="!isMobile">{{ listData.first.title }}</div> <div class="tit" v-if="!isMobile">{{ listData.first.title }}</div>
...@@ -15,7 +17,7 @@ ...@@ -15,7 +17,7 @@
</div> </div>
<ul class="news-right"> <ul class="news-right">
<li v-for="(item, index) in listData.list" :key="index"> <li v-for="(item, index) in listData.list" :key="index">
<app-link :item="{ news: { data: listData.first, path: '/news/hot' } }"> <app-link :data="item" :to="`/news/hot/${item.id}`">
<div class="time">{{ formatDate(item.start_time) }}</div> <div class="time">{{ formatDate(item.start_time) }}</div>
<div class="news-r-title">{{ item.title }}</div> <div class="news-r-title">{{ item.title }}</div>
<div class="del">{{ item.abstract }}</div> <div class="del">{{ item.abstract }}</div>
...@@ -72,7 +74,7 @@ export default { ...@@ -72,7 +74,7 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc{ .is-pc {
.news-content-box { .news-content-box {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
...@@ -159,67 +161,67 @@ export default { ...@@ -159,67 +161,67 @@ export default {
} }
} }
} }
.is-h5{ .is-h5 {
.news-content-box{ .news-content-box {
.content-box{ .content-box {
// height: 2.18rem; // height: 2.18rem;
position: relative; position: relative;
img{ img {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
} }
.news-left{ .news-left {
position: relative; position: relative;
} }
.mantle-box{ .mantle-box {
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: rgba(8, 8, 8, 0.45); background: rgba(8, 8, 8, 0.45);
padding-bottom: .14rem; padding-bottom: 0.14rem;
.con-txt{ .con-txt {
font-size: 0.12rem; font-size: 0.12rem;
font-weight: bold; font-weight: bold;
line-height: 0.17rem; line-height: 0.17rem;
color: #FFFFFF; color: #ffffff;
padding: .14rem .32rem 0 .19rem; padding: 0.14rem 0.32rem 0 0.19rem;
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
} }
} }
.news-right{ .news-right {
li{ li {
margin-top: .1rem; margin-top: 0.1rem;
padding: .13rem .14rem .11rem .12rem; padding: 0.13rem 0.14rem 0.11rem 0.12rem;
background: #fff; background: #fff;
.time{ .time {
font-size: 0.1rem; font-size: 0.1rem;
line-height: 100%; line-height: 100%;
color: #AB0A3D; color: #ab0a3d;
} }
.news-r-title{ .news-r-title {
font-size: 0.14rem; font-size: 0.14rem;
color: #333333; color: #333333;
margin-top: .1rem; margin-top: 0.1rem;
line-height: 0.21rem; line-height: 0.21rem;
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
.del{ .del {
font-size: 0.11rem; font-size: 0.11rem;
line-height: 0.2rem; line-height: 0.2rem;
color: #666666; color: #666666;
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
} }
} }
} }
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<div v-swiper:mySwiper="swiperOption" ref="mySwiper"> <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index"> <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
<app-link :item="{ news: { data: item, path: '/news/hot' } }"> <app-link :data="item" :to="`/news/hot/${item.id}`">
<img :src="item.web_img_uri" /> <img :src="item.web_img_uri" />
<div class="text">{{ item.title }}</div> <div class="text">{{ item.title }}</div>
</app-link> </app-link>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<template v-for="(item, index) in listData"> <template v-for="(item, index) in listData">
<van-swipe-item :key="index"> <van-swipe-item :key="index">
<div class="case"> <div class="case">
<app-link :item="{ news: { data: item, path: '/news/hot' } }"> <app-link :data="item" :to="`/news/hot/${item.id}`">
<img :src="item.web_img_uri" class="case-pic" /> <img :src="item.web_img_uri" class="case-pic" />
<p class="case-title">{{ item.title }}</p> <p class="case-title">{{ item.title }}</p>
</app-link> </app-link>
...@@ -81,8 +81,7 @@ export default { ...@@ -81,8 +81,7 @@ export default {
} }
}, },
created() {}, created() {},
mounted() { mounted() {},
},
methods: { methods: {
swiperStop() { swiperStop() {
this.swiper.autoplay.stop() this.swiper.autoplay.stop()
...@@ -94,8 +93,7 @@ export default { ...@@ -94,8 +93,7 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.is-pc{ .is-pc {
.max-width { .max-width {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
...@@ -164,7 +162,7 @@ export default { ...@@ -164,7 +162,7 @@ export default {
} }
} }
} }
.is-h5{ .is-h5 {
.case { .case {
position: relative; position: relative;
} }
......
...@@ -2,15 +2,15 @@ ...@@ -2,15 +2,15 @@
<div :class="isMobile ? 'is-h5' : 'is-pc'"> <div :class="isMobile ? 'is-h5' : 'is-pc'">
<div class="presence-content-box"> <div class="presence-content-box">
<card :title="$t('home.presence.title')" class="card-style"> <card :title="$t('home.presence.title')" class="card-style">
<template #header-aside <template #header-aside>
><nuxt-link to="/alumni/sharing">{{ $t('viewMore') }}</nuxt-link></template <nuxt-link to="/alumni/sharing">{{ $t('viewMore') }}</nuxt-link>
> </template>
</card> </card>
<div class="content-mian"> <div class="content-mian">
<van-swipe class="my-swipe" :autoplay="5000" :vertical="true" indicator-color="white"> <van-swipe class="my-swipe" :autoplay="5000" :vertical="true" indicator-color="white">
<template v-for="(item, index) in listData"> <template v-for="(item, index) in listData">
<van-swipe-item :key="index"> <van-swipe-item :key="index">
<app-link :item="{ news: { data: item, path: '/news/hot' } }"> <app-link :data="item" :to="`/news/hot/${item.id}`">
<img :src="item.web_img_uri" /> <img :src="item.web_img_uri" />
</app-link> </app-link>
</van-swipe-item> </van-swipe-item>
......
...@@ -3,16 +3,20 @@ ...@@ -3,16 +3,20 @@
<div class="color-bar"></div> <div class="color-bar"></div>
<div class="head-top-content"> <div class="head-top-content">
<div class="max-width-content"> <div class="max-width-content">
<app-link :item="{ path: '/' }"> <nuxt-link to="/">
<img src="https://zws-imgs-pub.ezijing.com/static/public/307f688850f8308a5c944bd129436fe0.png" /> <img src="https://zws-imgs-pub.ezijing.com/static/public/307f688850f8308a5c944bd129436fe0.png" />
</app-link> </nuxt-link>
<div class="user" v-if="user.id"> <div class="user" v-if="user.id">
<span>{{ user.realname || user.nickname }}</span <span>{{ user.realname || user.nickname }}</span
><em>|</em><span class="logout" @click="logout">{{ $t('menu.out') }}</span> ><em>|</em><span class="logout" @click="logout">{{ $t('menu.out') }}</span>
</div> </div>
<div class="login-btn-box" v-else> <div class="login-btn-box" v-else>
<div class="login"><a :href="loginURL">{{ $t('menu.fastLogin') }}</a></div> <div class="login">
<div class="register"><a :href="registerURL">{{ $t('menu.register') }}</a></div> <a :href="loginURL">{{ $t('menu.fastLogin') }}</a>
</div>
<div class="register">
<a :href="registerURL">{{ $t('menu.register') }}</a>
</div>
</div> </div>
<div class="language"> <div class="language">
<span @click="switchLocale('zh-CN')">中文</span> / <span @click="switchLocale('en-US')">EN</span> <span @click="switchLocale('zh-CN')">中文</span> / <span @click="switchLocale('en-US')">EN</span>
...@@ -26,12 +30,10 @@ ...@@ -26,12 +30,10 @@
</div> </div>
</template> </template>
<script> <script>
import AppLink from '@/components/Link' import AppMenu from './Menu'
import AppMenu from '@/components/Menu'
export default { export default {
components: { components: {
AppMenu, AppMenu
AppLink
}, },
data() { data() {
return {} return {}
......
<template>
<div class="link-content">
<template v-if="item.news">
<a
:target="item.news.data.uri !== '' ? '_blank' : '_self'"
:href="item.news.data.uri !== '' ? item.news.data.uri : `${item.news.path}/${item.news.data.id}`">
<slot />
</a>
</template>
<template v-else>
<nuxt-link
:to="item.path">
<slot />
</nuxt-link>
</template>
</div>
</template>
<script>
export default {
props: { item: { type: Object } }
}
</script>
<style lang="scss" scoped>
.link-content{
height: 100%;
}
</style>
...@@ -24,9 +24,7 @@ ...@@ -24,9 +24,7 @@
@mouseenter="levelShow(level2Item)" @mouseenter="levelShow(level2Item)"
@mouseleave="levelShow(level2Item, 'out')" @mouseleave="levelShow(level2Item, 'out')"
> >
<app-link :item="{ <app-link :to="level2Item.path">
path: level2Item.path
}">
<div class="name"> <div class="name">
{{ level2Item.name }} {{ level2Item.name }}
</div> </div>
......
...@@ -7,14 +7,7 @@ ...@@ -7,14 +7,7 @@
</div> </div>
<ul class="list-box"> <ul class="list-box">
<li v-for="(item, index) in listData" :key="index"> <li v-for="(item, index) in listData" :key="index">
<app-link <app-link :data="item" :to="`/news/hot/${item.id}`">
:item="{
news: {
data: item,
path: '/news/hot'
}
}"
>
<img :src="item.web_img_uri" alt="" /> <img :src="item.web_img_uri" alt="" />
<div class="dec">{{ item.title }}</div> <div class="dec">{{ item.title }}</div>
</app-link> </app-link>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论