提交 5648b00f authored 作者: lihuihui's avatar lihuihui

修改模板

上级 c3635d7a
......@@ -148,6 +148,7 @@ export default {
border: none;
}
.form-select {
appearance: none;
position: relative;
padding: 0 10px;
width: 100%;
......
......@@ -11,6 +11,7 @@ import TreeItem from './TreeItem'
export default {
components: { TreeItem },
data() {
const _this = this
return {
list: [
{
......@@ -53,7 +54,9 @@ export default {
{
name: '我要报名',
onClick: () => {
this.$emit('showApplyForm')
!_this.user.id
? window.location.href = 'https://login.ezijing.com/auth/login/index?redirect_uri=https://marywood-bm.ezijing.com/my/account'
: window.location.href = 'https://marywood-bm.ezijing.com/my/account'
}
}
]
......@@ -63,6 +66,11 @@ export default {
showTips() {
this.$notify({ type: 'primary', message: '暂未开通,尽请期待' })
}
},
computed: {
user() {
return this.$store.state.user || {}
}
}
}
</script>
......
......@@ -100,6 +100,7 @@ export default {
}
.alumni-content {
padding-top: 89px;
padding-bottom: 50px;
.title-content {
display: flex;
.left-title {
......@@ -169,8 +170,8 @@ export default {
.case-pic {
display: block;
width: 100%;
height: 1.17rem;
object-fit: cover;
// height: 1.17rem;
// object-fit: cover;
}
.case-title {
position: absolute;
......
......@@ -179,7 +179,7 @@ export default {
.content-mian {
padding-top: 24px;
.my-swipe {
height: 500px;
// height: 500px;
img {
width: 100%;
height: 100%;
......@@ -259,7 +259,7 @@ export default {
}
.presence-content-box {
.my-swipe {
height: 1.58rem;
// height: 1.58rem;
img {
width: 100%;
height: 100%;
......
......@@ -66,11 +66,12 @@ export default {
.link {
margin-top: 0.22rem;
a {
font-size: 0.14rem;
font-size: 0.11rem;
margin-right: 0.2rem;
}
}
.friendlink {
font-size: 0.11rem;
margin-top: 0.22rem;
a {
font-size: 0.11rem;
......
......@@ -2,10 +2,12 @@
<div>
<header class="main-header">
<template v-if="!searchVisible">
<div class="logo-box">
<img src="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/ezijing-logo.svg" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood_logo.svg" />
</div>
<div class="logo-box">
<nuxt-link to="/" class="logo">
<img src="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/ezijing-logo.svg" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood_logo.svg" />
</nuxt-link>
</div>
<!-- <nuxt-link to="/" class="logo"></nuxt-link> -->
<div class="search" @click="toggleSearch"></div>
<div class="menu" :class="menuClasses" @click="toggleMenu"></div>
......@@ -85,9 +87,7 @@ export default {
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.14);
.logo {
flex: 1;
background: url('~/assets/images/logo.png') no-repeat;
height: 0.26rem;
background-size: contain;
display: flex;
}
.logo-box {
flex: 1;
......
......@@ -6,10 +6,12 @@
<!-- <nuxt-link to="/">
<img src="https://zws-imgs-pub.ezijing.com/static/public/307f688850f8308a5c944bd129436fe0.png" />
</nuxt-link> -->
<div class="logo-box">
<img src="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/ezijing-logo.svg" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood_logo.svg" />
</div>
<nuxt-link to="/">
<div class="logo-box">
<img src="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/ezijing-logo.svg" />
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/marywood_logo.svg" />
</div>
</nuxt-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>
......
......@@ -90,7 +90,7 @@ export default {
contact: '联系电话:010-62793299',
email: '邮&nbsp;&nbsp;&nbsp;&nbsp;箱:service@ezijing.com',
link1: '中国教育部',
link2: '教育部涉外监管网',
link2: '教育涉外监管信息网',
link3: '印第安纳大学',
link4: 'Kelley商学院',
link5: '紫荆教育',
......
......@@ -90,7 +90,7 @@ export default {
contact: '联系电话:010-62793299',
email: '邮&nbsp;&nbsp;&nbsp;&nbsp;箱:service@ezijing.com',
link1: '中国教育部',
link2: '教育部涉外监管网',
link2: '教育涉外监管信息网',
link3: '玛丽伍德大学',
link4: '美国教育部',
link5: '紫荆教育',
......
<template>
<div class="outstanding">
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary-alumni-new2.png" style="width:90%;margin:0 auto;display:block">
<div class="outstanding">
<div class="alumni">
<!-- <h5>{{ $t('outstanding.title1') }}</h5> -->
<ul class="card-list">
<li v-for="(item, index) in studentList" :key="index">
<div class="avatar">
<img :src="item.avatar" />
</div>
<div class="text">
<h6>{{ item.name }}</h6>
<p v-for="it in item.post" :key="it">{{ it }}</p>
</div>
</li>
</ul>
</div>
</div>
</app-frame>
</div>
</template>
<script>
import appFrame from '@/components/appFrame'
export default {
......@@ -14,6 +30,38 @@ export default {
},
data() {
return {
studentList: [
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary628-sta-t1.png',
name: '甄清波',
post: ['上海洛安资产管理集团有限公司', '创始人/总裁']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary628-sta-t2.png',
name: '张志刚',
post: ['抚州市临川区第一文化馆', '白浒窑陶瓷非遗传承人']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary628-sta-t3.png',
name: '纪元明',
post: ['华景川集团有限公司', '联合创始人/总裁']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary628-sta-t4.png',
name: '廖述斌',
post: ['简道众创投资股份有限公司', '创始人/总裁']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary628-sta-t5.png',
name: '孙元欣',
post: ['橫琴元博文创资本管理中心', '西安中星量子科技产业园有限公司', '董事长']
},
{
avatar: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary628-sta-t6.png',
name: '马波',
post: ['上海广播电视台(集团)兰馨文化', '副总经理']
}
],
frameParams: {
banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/alumni_banner.jpg',
slider: [
......@@ -28,78 +76,160 @@ export default {
]
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.alumni {
padding: 30px 74px;
h5 {
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 74px;
color: #333333;
}
.card-list {
margin-bottom: 30px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
li {
width: 410px;
height: 195px;
background: #ebebeb;
.is-pc{
.alumni {
padding: 30px 74px;
h5 {
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 500;
line-height: 74px;
color: #333333;
}
.card-list {
margin-bottom: 30px;
display: flex;
margin: 0 20px 21px 0;
transition: 0.5s ease-in-out;
.avatar {
width: 204px;
height: 100%;
img {
width: 157px;
height: 157px;
margin: 20px 0 0 23px;
}
}
.text {
margin-top: 72px;
h6 {
font-size: 18px;
font-family: HelveticaNeueLTPro-Md;
line-height: 18px;
color: #aa1941;
margin-bottom: 10px;
flex-direction: row;
flex-wrap: wrap;
li {
width: 410px;
height: 195px;
background: #ebebeb;
display: flex;
margin: 0 20px 21px 0;
transition: 0.5s ease-in-out;
.avatar {
width: 204px;
height: 100%;
img {
width: 157px;
height: 157px;
margin: 20px 0 0 23px;
}
}
p {
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 22px;
color: #666;
.text {
margin-top: 30px;
h6 {
font-size: 18px;
font-family: HelveticaNeueLTPro-Md;
line-height: 18px;
color: #aa1941;
margin-bottom: 10px;
}
p {
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 22px;
color: #666;
}
div {
font-size: 12px;
font-family: Source Han Sans CN;
font-weight: 300;
line-height: 18px;
color: #666;
}
}
div {
font-size: 12px;
font-family: Source Han Sans CN;
font-weight: 300;
line-height: 18px;
color: #666;
}
li:nth-child(even) {
margin-right: 0;
}
li:hover {
background: #aa1941;
.text {
h6,
p,
div {
color: #fff;
}
}
}
}
li:nth-child(even) {
margin-right: 0;
}
}
.is-h5{
.alumni {
padding: .2rem .16rem .35rem;
h5 {
font-size: .14rem;
font-weight: 700;
line-height: 100%;
padding: .2rem 0;
color: #333;
}
li:hover {
background: #aa1941;
.text {
h6,
p,
div {
color: #fff;
.card-list {
margin-bottom: .15rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
li {
box-sizing: border-box;
width: 1.68rem;
background: #ebebeb;
padding: .11rem .05rem;
display: flex;
margin-bottom: .06rem;
margin-left: .06rem;
&:nth-child(odd){
margin-left: 0;
}
.avatar {
// width: 204px;
// height: 100%;
img {
width: .63rem;
height: .63rem;
display: block;
}
}
.text {
// margin-top: .3rem;
margin-left: .1rem;
h6 {
font-size: .11rem;
color: #aa1941;
font-weight: 700;
white-space: nowrap;
}
p {
font-size: .1rem;
line-height: .15rem;
margin-top: .05rem;
color: #666;
}
div {
font-size: .07rem;
line-height: .15rem;
color: #666;
margin-top: .02rem;
}
}
}
li:nth-child(even) {
margin-right: 0;
}
li:hover {
background: #aa1941;
.text {
h6,
p,
div {
color: #fff;
}
}
}
}
}
}
</style>
<template>
<app-frame :data="frameParams">
<div class="detail-content-box">
<div class="content-box">
<div class="back-btn" @click="$router.go(-1)">
<div class="el-icon-arrow-left"></div>
<div class="text">返回</div>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="detail-content-box">
<div class="content-box">
<div class="back-btn" @click="$router.go(-1)">
<div class="el-icon-arrow-left"></div>
<div class="text">返回</div>
</div>
<div class="times">{{ formatDate(data.start_time) }}</div>
<div class="titles">{{ data.title }}</div>
<div class="article-content" v-html="data.content"></div>
<recommend />
</div>
<div class="times">{{ formatDate(data.start_time) }}</div>
<div class="titles">{{ data.title }}</div>
<div class="article-content" v-html="data.content"></div>
<recommend />
</div>
</div>
</app-frame>
</app-frame>
</div>
</template>
<script>
import appFrame from '@/components/appFrame'
import recommend from '@/components/recommend'
......@@ -53,111 +56,228 @@ export default {
console.log(date.getMonth())
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.detail-content-box {
// width: 1000px;
// background: #fff;
// box-sizing: border-box;
// margin-bottom: 100px;
.content-box {
padding: 50px 50px 94px;
::v-deep{
img{
width: 100%;
height: auto !important;
display: block;
}
.back-btn {
display: flex;
align-items: center;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
}
.is-pc{
.detail-content-box {
// background: #fff;
// box-sizing: border-box;
// margin-bottom: 100px;
.content-box {
padding: 50px 50px 94px;
}
.back-btn {
display: flex;
align-items: center;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
font-size: 16px;
}
.text {
font-size: 16px;
color: #999999;
}
}
.times {
font-size: 16px;
line-height: 100%;
margin: 35px 0 16px;
color: #999999;
}
.text {
.titles {
font-size: 32px;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 10px;
// line-height: 100%;
}
.article-content {
padding-top: 25px;
font-size: 14px;
line-height: 28px;
color: #333333;
img {
display: block;
width: 100%;
margin-top: 40px;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 37px;
.titles {
display: flex;
align-items: center;
.line {
width: 6px;
height: 22px;
background: #aa1941;
}
.text {
font-size: 22px;
color: #333333;
margin-left: 10px;
}
}
.list-box {
margin-top: 50px;
display: flex;
justify-content: space-between;
li {
width: 280px;
img {
width: 280px;
height: 184px;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 16px;
line-height: 26px;
color: #333333;
margin-top: 10px;
}
}
}
}
.more-btn {
position: relative;
z-index: 999;
width: 164px;
height: 40px;
border: 1px solid #d3d3d3;
border-radius: 8px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #999999;
margin: 50px auto 0;
cursor: pointer;
}
}
.times {
font-size: 16px;
line-height: 100%;
margin: 35px 0 16px;
color: #999999;
}
.titles {
font-size: 32px;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 10px;
// line-height: 100%;
}
.article-content {
padding-top: 25px;
font-size: 14px;
line-height: 28px;
color: #333333;
img {
display: block;
width: 100%;
margin-top: 40px;
}
.is-h5{
.detail-content-box {
// background: #fff;
// box-sizing: border-box;
// margin-bottom: 100px;
.content-box {
padding: .25rem .25rem .47rem;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 37px;
.titles {
.back-btn {
display: flex;
align-items: center;
.line {
width: 6px;
height: 22px;
background: #aa1941;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
font-size: 16px;
}
.text {
font-size: 22px;
color: #333333;
margin-left: 10px;
font-size: .14rem;
color: #999999;
}
}
.list-box {
margin-top: 50px;
display: flex;
justify-content: space-between;
li {
width: 280px;
img {
width: 280px;
height: 184px;
display: block;
.times {
font-size: .14rem;
line-height: 100%;
margin: .17rem 0 .08rem;
color: #999999;
}
.titles {
font-size: .18rem;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: .05rem;
// line-height: 100%;
}
.article-content {
padding-top: .13rem;
font-size: .12rem;
line-height: .14rem;
color: #333333;
img {
display: block;
width: 100%;
margin-top: .2rem;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: .17rem;
.titles {
display: flex;
align-items: center;
.line {
width: .03rem;
height: .11rem;
background: #aa1941;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 16px;
line-height: 26px;
.text {
font-size: .16rem;
color: #333333;
margin-top: 10px;
margin-left: .05rem;
}
}
.list-box {
margin-top: .25rem;
display: flex;
justify-content: space-between;
li {
width: 1.4rem;
img {
width: 1.4rem;
height: .92rem;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: .14rem;
line-height: .13rem;
color: #333333;
margin-top: .05rem;
}
}
}
}
}
.more-btn {
position: relative;
z-index: 999;
width: 164px;
height: 40px;
border: 1px solid #d3d3d3;
border-radius: 8px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #999999;
margin: 50px auto 0;
cursor: pointer;
.more-btn {
position: relative;
z-index: 999;
width: .82rem;
height: .2rem;
border: 1px solid #d3d3d3;
border-radius: .04rem;
line-height: .2re,;
text-align: center;
font-size: .14rem;
color: #999999;
margin: .25rem auto 0;
cursor: pointer;
}
}
}
</style>
......@@ -46,16 +46,12 @@ export default {
}
},
created() {},
mounted() {
if (document.documentElement.clientWidth < 1400) {
// this.isScale = true
}
}
mounted() {}
}
</script>
<style>
.container {
width: 100%;
padding-bottom: 50px;
/* padding-bottom: 50px; */
}
</style>
<template>
<app-frame :data="frameParams">
<div class="detail-content-box">
<div class="content-box">
<div class="back-btn" @click="$router.go(-1)">
<div class="el-icon-arrow-left"></div>
<div class="text">返回</div>
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="detail-content-box">
<div class="content-box">
<div class="back-btn" @click="$router.go(-1)">
<div class="el-icon-arrow-left"></div>
<div class="text">返回</div>
</div>
<div class="times">{{ formatDate(data.start_time) }}</div>
<div class="titles">{{ data.title }}</div>
<div class="article-content" v-html="data.content"></div>
<recommend />
</div>
<div class="times">{{ formatDate(data.start_time) }}</div>
<div class="titles">{{ data.title }}</div>
<div class="article-content" v-html="data.content"></div>
<recommend />
</div>
</div>
</app-frame>
</app-frame>
</div>
</template>
<script>
import appFrame from '@/components/appFrame'
import recommend from '@/components/recommend'
......@@ -52,110 +55,228 @@ export default {
console.log(date.getMonth())
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.detail-content-box {
// background: #fff;
// box-sizing: border-box;
// margin-bottom: 100px;
.content-box {
padding: 50px 50px 94px;
::v-deep{
img{
width: 100%;
height: auto !important;
display: block;
}
.back-btn {
display: flex;
align-items: center;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
}
.is-pc{
.detail-content-box {
// background: #fff;
// box-sizing: border-box;
// margin-bottom: 100px;
.content-box {
padding: 50px 50px 94px;
}
.back-btn {
display: flex;
align-items: center;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
font-size: 16px;
}
.text {
font-size: 16px;
color: #999999;
}
}
.times {
font-size: 16px;
line-height: 100%;
margin: 35px 0 16px;
color: #999999;
}
.text {
.titles {
font-size: 32px;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 10px;
// line-height: 100%;
}
.article-content {
padding-top: 25px;
font-size: 14px;
line-height: 28px;
color: #333333;
img {
display: block;
width: 100%;
margin-top: 40px;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 37px;
.titles {
display: flex;
align-items: center;
.line {
width: 6px;
height: 22px;
background: #aa1941;
}
.text {
font-size: 22px;
color: #333333;
margin-left: 10px;
}
}
.list-box {
margin-top: 50px;
display: flex;
justify-content: space-between;
li {
width: 280px;
img {
width: 280px;
height: 184px;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 16px;
line-height: 26px;
color: #333333;
margin-top: 10px;
}
}
}
}
.more-btn {
position: relative;
z-index: 999;
width: 164px;
height: 40px;
border: 1px solid #d3d3d3;
border-radius: 8px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #999999;
margin: 50px auto 0;
cursor: pointer;
}
}
.times {
font-size: 16px;
line-height: 100%;
margin: 35px 0 16px;
color: #999999;
}
.titles {
font-size: 32px;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 10px;
// line-height: 100%;
}
.article-content {
padding-top: 25px;
font-size: 14px;
line-height: 28px;
color: #333333;
img {
display: block;
width: 100%;
margin-top: 40px;
}
.is-h5{
.detail-content-box {
// background: #fff;
// box-sizing: border-box;
// margin-bottom: 100px;
.content-box {
padding: .25rem .25rem .47rem;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 37px;
.titles {
.back-btn {
display: flex;
align-items: center;
.line {
width: 6px;
height: 22px;
background: #aa1941;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
font-size: 16px;
}
.text {
font-size: 22px;
color: #333333;
margin-left: 10px;
font-size: .14rem;
color: #999999;
}
}
.list-box {
margin-top: 50px;
display: flex;
justify-content: space-between;
li {
width: 280px;
img {
width: 280px;
height: 184px;
display: block;
.times {
font-size: .14rem;
line-height: 100%;
margin: .17rem 0 .08rem;
color: #999999;
}
.titles {
font-size: .18rem;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: .05rem;
// line-height: 100%;
}
.article-content {
padding-top: .13rem;
font-size: .12rem;
line-height: .14rem;
color: #333333;
img {
display: block;
width: 100%;
margin-top: .2rem;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: .17rem;
.titles {
display: flex;
align-items: center;
.line {
width: .03rem;
height: .11rem;
background: #aa1941;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 16px;
line-height: 26px;
.text {
font-size: .16rem;
color: #333333;
margin-top: 10px;
margin-left: .05rem;
}
}
.list-box {
margin-top: .25rem;
display: flex;
justify-content: space-between;
li {
width: 1.4rem;
img {
width: 1.4rem;
height: .92rem;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: .14rem;
line-height: .13rem;
color: #333333;
margin-top: .05rem;
}
}
}
}
}
.more-btn {
position: relative;
z-index: 999;
width: 164px;
height: 40px;
border: 1px solid #d3d3d3;
border-radius: 8px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #999999;
margin: 50px auto 0;
cursor: pointer;
.more-btn {
position: relative;
z-index: 999;
width: .82rem;
height: .2rem;
border: 1px solid #d3d3d3;
border-radius: .04rem;
line-height: .2re,;
text-align: center;
font-size: .14rem;
color: #999999;
margin: .25rem auto 0;
cursor: pointer;
}
}
}
</style>
<template>
<div class="detail-content-box">
<div :class="isMobile ? 'is-h5' : 'is-pc'">
<app-frame :data="frameParams">
<div class="content-box">
<div class="back-btn" @click="$router.go(-1)">
<div class="el-icon-arrow-left"></div>
<div class="text">返回</div>
<div class="detail-content-box">
<div class="content-box">
<div class="back-btn" @click="$router.go(-1)">
<div class="el-icon-arrow-left"></div>
<div class="text">返回</div>
</div>
<div class="times">{{ formatDate(data.start_time) }}</div>
<div class="titles">{{ data.title }}</div>
<div class="article-content" v-html="data.content"></div>
<recommend />
</div>
<div class="times">{{ formatDate(data.start_time) }}</div>
<div class="titles">{{ data.title }}</div>
<div class="article-content" v-html="data.content"></div>
<recommend />
</div>
</app-frame>
</div>
</template>
<script>
import appFrame from '@/components/appFrame'
import recommend from '@/components/recommend'
......@@ -54,111 +57,228 @@ export default {
console.log(date.getMonth())
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
}
}
}
</script>
<style lang="scss" scoped>
.detail-content-box {
// width: 1000px;
// background: #fff;
// box-sizing: border-box;
// margin-bottom: 100px;
.content-box {
padding: 50px 50px 94px;
::v-deep{
img{
width: 100%;
height: auto !important;
display: block;
}
.back-btn {
display: flex;
align-items: center;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
}
.is-pc{
.detail-content-box {
// background: #fff;
// box-sizing: border-box;
// margin-bottom: 100px;
.content-box {
padding: 50px 50px 94px;
}
.back-btn {
display: flex;
align-items: center;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
font-size: 16px;
}
.text {
font-size: 16px;
color: #999999;
}
}
.times {
font-size: 16px;
line-height: 100%;
margin: 35px 0 16px;
color: #999999;
}
.text {
.titles {
font-size: 32px;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 10px;
// line-height: 100%;
}
.article-content {
padding-top: 25px;
font-size: 14px;
line-height: 28px;
color: #333333;
img {
display: block;
width: 100%;
margin-top: 40px;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 37px;
.titles {
display: flex;
align-items: center;
.line {
width: 6px;
height: 22px;
background: #aa1941;
}
.text {
font-size: 22px;
color: #333333;
margin-left: 10px;
}
}
.list-box {
margin-top: 50px;
display: flex;
justify-content: space-between;
li {
width: 280px;
img {
width: 280px;
height: 184px;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 16px;
line-height: 26px;
color: #333333;
margin-top: 10px;
}
}
}
}
.more-btn {
position: relative;
z-index: 999;
width: 164px;
height: 40px;
border: 1px solid #d3d3d3;
border-radius: 8px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #999999;
margin: 50px auto 0;
cursor: pointer;
}
}
.times {
font-size: 16px;
line-height: 100%;
margin: 35px 0 16px;
color: #999999;
}
.titles {
font-size: 32px;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 10px;
// line-height: 100%;
}
.article-content {
padding-top: 25px;
font-size: 14px;
line-height: 28px;
color: #333333;
img {
display: block;
width: 100%;
margin-top: 40px;
}
.is-h5{
.detail-content-box {
// background: #fff;
// box-sizing: border-box;
// margin-bottom: 100px;
.content-box {
padding: .25rem .25rem .47rem;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: 37px;
.titles {
.back-btn {
display: flex;
align-items: center;
.line {
width: 6px;
height: 22px;
background: #aa1941;
cursor: pointer;
.el-icon-arrow-left {
color: rgba(153, 153, 153, 1);
font-size: 16px;
}
.text {
font-size: 22px;
color: #333333;
margin-left: 10px;
font-size: .14rem;
color: #999999;
}
}
.list-box {
margin-top: 50px;
display: flex;
justify-content: space-between;
li {
width: 280px;
img {
width: 280px;
height: 184px;
display: block;
.times {
font-size: .14rem;
line-height: 100%;
margin: .17rem 0 .08rem;
color: #999999;
}
.titles {
font-size: .18rem;
font-weight: bold;
color: #141414;
// height: 62px;
border-bottom: 1px solid #e6e6e6;
padding-bottom: .05rem;
// line-height: 100%;
}
.article-content {
padding-top: .13rem;
font-size: .12rem;
line-height: .14rem;
color: #333333;
img {
display: block;
width: 100%;
margin-top: .2rem;
}
}
.recommend-content {
border-top: 1px solid #e6e6e6;
padding-top: .17rem;
.titles {
display: flex;
align-items: center;
.line {
width: .03rem;
height: .11rem;
background: #aa1941;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 16px;
line-height: 26px;
.text {
font-size: .16rem;
color: #333333;
margin-top: 10px;
margin-left: .05rem;
}
}
.list-box {
margin-top: .25rem;
display: flex;
justify-content: space-between;
li {
width: 1.4rem;
img {
width: 1.4rem;
height: .92rem;
display: block;
}
.dec {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: .14rem;
line-height: .13rem;
color: #333333;
margin-top: .05rem;
}
}
}
}
}
.more-btn {
position: relative;
z-index: 999;
width: 164px;
height: 40px;
border: 1px solid #d3d3d3;
border-radius: 8px;
line-height: 40px;
text-align: center;
font-size: 16px;
color: #999999;
margin: 50px auto 0;
cursor: pointer;
.more-btn {
position: relative;
z-index: 999;
width: .82rem;
height: .2rem;
border: 1px solid #d3d3d3;
border-radius: .04rem;
line-height: .2re,;
text-align: center;
font-size: .14rem;
color: #999999;
margin: .25rem auto 0;
cursor: pointer;
}
}
}
</style>
......@@ -40,9 +40,9 @@ httpRequest.interceptors.request.use(
config.params = params
}
}
// if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
// config.data = qs.stringify(config.data)
// }
if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
config.data = qs.stringify(config.data)
}
if (config.headers['Content-Type'] === 'multipart/form-data') {
const form = new window.FormData()
for (const key in config.data) {
......@@ -57,6 +57,7 @@ httpRequest.interceptors.request.use(
}
)
// 响应拦截
httpRequest.interceptors.response.use(
function(response) {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论