提交 7798b5f5 authored 作者: 王鹏飞's avatar 王鹏飞

优化

上级 dfb56873
......@@ -37,5 +37,4 @@ a {
.main-content p {
font-size: 0.12rem;
line-height: 0.24rem;
color: #424242;
}
......@@ -31,7 +31,6 @@ export default {
font-size: 0.17rem;
font-weight: bold;
line-height: 1;
color: #424242;
}
.card-hd__aside {
font-size: 0.1rem;
......
......@@ -16,7 +16,7 @@ export default {
props: { item: { type: Object } },
methods: {
formatDate(value) {
const date = new Date(value)
const date = new Date(value.replace(/\-/g, '/'))
return date.getFullYear() + '/' + date.getMonth() + 1 + '/' + date.getDate()
}
}
......@@ -52,7 +52,6 @@ export default {
.news-item-content__text {
margin-top: 0.2rem;
font-size: 0.1rem;
color: #424242;
line-height: 0.2rem;
}
</style>
......@@ -16,7 +16,7 @@ export default {
props: { item: { type: Object } },
methods: {
formatDate(value) {
const date = new Date(value)
const date = new Date(value.replace(/\-/g, '/'))
return date.getFullYear() + '/' + date.getMonth() + 1 + '/' + date.getDate()
}
}
......@@ -52,7 +52,6 @@ export default {
.news-item-content__text {
margin-top: 0.2rem;
font-size: 0.1rem;
color: #424242;
line-height: 0.2rem;
}
</style>
<template>
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
<template v-for="(item, index) in list">
<van-swipe-item :key="index">
<nuxt-link :to="`/about/news/${item.id}`"><img :src="item.photo_uri" class="banner-img" /></nuxt-link>
......@@ -16,7 +16,7 @@ export default {
}
},
async fetch() {
const params = { page: 1, per_page: 100, type: 69, project_id: 1013 }
const params = { page: 1, per_page: 5, type: 69, project_id: 1013 }
this.list = await this.$axios.$get('/api/zws/v1/cms/news', { params }).then(res => res)
}
}
......@@ -29,4 +29,14 @@ export default {
height: 1.51rem;
object-fit: cover;
}
::v-deep .van-swipe__indicator {
width: 2px;
height: 2px;
background-color: #fff;
opacity: 1;
}
::v-deep .van-swipe__indicator--active {
width: 10px;
border-radius: 2px;
}
</style>
......@@ -21,7 +21,7 @@ export default {
return { list: [] }
},
async fetch() {
const params = { page: 1, per_page: 100, type: 73, project_id: 1013 }
const params = { page: 1, per_page: 5, type: 73, project_id: 1013 }
this.list = await this.$axios.$get('/api/zws/v1/cms/news', { params }).then(res => res)
}
}
......
<template>
<card title="公开课">
<template #header-aside><nuxt-link to="">查看更多+</nuxt-link></template>
<template #header-aside><nuxt-link to="/about/news">查看更多+</nuxt-link></template>
<img src="/images/home_class_banner.png" class="class-banner" />
<div class="list">
<div class="list-item" v-for="(item, index) in list" :key="index">
......@@ -31,17 +31,14 @@ export default {
list: []
}
},
fetch() {
this.list = []
},
async fetch() {
const params = { page: 1, per_page: 100, type: 72, project_id: 1013 }
const params = { page: 1, per_page: 2, type: 72, project_id: 1013 }
this.list = await this.$axios.$get('/api/zws/v1/cms/news', { params }).then(res => res)
},
methods: {
// 2020-01-22
formatDate(value) {
const date = new Date(value)
const date = new Date(value.replace(/\-/g, '/'))
return date.getFullYear() + '-' + date.getMonth() + 1 + '-' + date.getDate()
}
}
......@@ -78,6 +75,7 @@ export default {
}
.list-item-ft {
display: flex;
align-items: center;
color: #a8a8a8;
}
.list-item__date {
......@@ -86,7 +84,11 @@ export default {
.list-item__view {
flex: 1;
font-size: 0.1rem;
margin-left: 0.14rem;
padding-left: 0.14rem;
background: url('https://zws-imgs-pub.ezijing.com/static/public/948410ca5d8663ef4e80d4913df8a9b4.png') no-repeat left
center;
background-size: 0.11rem 0.07rem;
}
.list-item__btn {
min-width: 0.56rem;
......
......@@ -137,7 +137,6 @@ export default {
font-size: 0.12rem;
font-weight: bold;
line-height: 1;
color: #424242;
}
.degree-bd {
display: flex;
......
......@@ -31,8 +31,8 @@ export default {
data() {
return {
futureList: [
{ title: 'KELLEY商学院金融硕士(MSF)开学典礼', created_time: '2020-01-22 14:41:08' },
{ title: '酒店管理HMBA报名截止日', created_time: '2020-01-22 14:41:08' }
{ title: 'KELLEY商学院金融硕士(MSF)开学典礼', created_time: '2020-03-23 14:41:08' },
{ title: '酒店管理HMBA报名截止日', created_time: '2020-04-10 14:41:08' }
],
list: []
}
......@@ -40,22 +40,22 @@ export default {
methods: {
// 2月14日
formatDate(value) {
const date = new Date(value)
const date = new Date(value.replace(/\-/g, '/'))
return date.getMonth() + 1 + '月' + date.getDate() + '日'
},
// 2021
formatYY(value) {
const date = new Date(value)
const date = new Date(value.replace(/\-/g, '/'))
return date.getFullYear()
},
// 2/14
formatMD(value) {
const date = new Date(value)
const date = new Date(value.replace(/\-/g, '/'))
return date.getMonth() + 1 + '/' + date.getDate()
}
},
async fetch() {
const params = { page: 1, per_page: 100, type: 75, project_id: 1013 }
const params = { page: 1, per_page: 2, type: 75, project_id: 1013 }
this.list = await this.$axios.$get('/api/zws/v1/cms/news', { params }).then(res => res)
}
}
......@@ -71,7 +71,6 @@ export default {
.future-left {
width: 0.75rem;
font-size: 0.15rem;
color: #424242;
text-align: center;
}
.future-right {
......@@ -103,6 +102,9 @@ export default {
align-items: center;
padding: 0.13rem 0;
border-bottom: 1px solid #e3e3e3;
&:hover {
color: #aa1941;
}
}
.list-item__date {
display: flex;
......@@ -126,7 +128,6 @@ export default {
.list-item__title {
margin-left: 0.13rem;
font-size: 0.13rem;
color: #424242;
line-height: 0.26rem;
}
</style>
<template>
<card title="校长寄语">
<template #header-aside><nuxt-link to="">查看更多+</nuxt-link></template>
<van-swipe class="my-swipe" :autoplay="3000" :vertical="true" indicator-color="white">
<template #header-aside><nuxt-link to="/about/news">查看更多+</nuxt-link></template>
<van-swipe class="my-swipe" :autoplay="5000" :vertical="true" indicator-color="white">
<template v-for="(item, index) in list">
<van-swipe-item :key="index"><img :src="item.photo_uri" class="banner-img" /></van-swipe-item>
</template>
......@@ -17,7 +17,7 @@ export default {
return { list: [] }
},
async fetch() {
const params = { page: 1, per_page: 100, type: 70, project_id: 1013 }
const params = { page: 1, per_page: 5, type: 70, project_id: 1013 }
this.list = await this.$axios.$get('/api/zws/v1/cms/news', { params }).then(res => res)
}
}
......@@ -35,6 +35,16 @@ export default {
}
::v-deep .van-swipe__indicators--vertical {
left: auto;
right: 0;
right: 6px;
}
::v-deep .van-swipe__indicator {
width: 2px;
height: 2px;
background-color: #fff;
opacity: 1;
}
::v-deep .van-swipe__indicator--active {
height: 10px;
border-radius: 2px;
}
</style>
......@@ -73,7 +73,6 @@ export default {
font-size: 0.12rem;
font-weight: bold;
line-height: 1;
color: #424242;
}
.service-bd {
display: flex;
......
<template>
<card title="校友故事">
<template #header-aside><nuxt-link to="">查看更多+</nuxt-link></template>
<p class="tips">You are What you together, 结识5000+ 同样优秀的人!</p>
<van-swipe class="my-swipe" :loop="false" :show-indicators="false">
<swiper ref="mySwiper" :options="swiperOptions" class="my-swiper">
<template v-for="(item, index) in list">
<van-swipe-item :key="index"><img :src="item.photo_uri" class="banner-img" /></van-swipe-item>
<swiper-slide :key="index">
<nuxt-link :to="`/alumnus/${item.id}`">
<img :src="item.photo_uri" class="banner-img" />
<p class="banner-title">{{ item.title }}</p>
</nuxt-link>
</swiper-slide>
</template>
</van-swipe>
</swiper>
</card>
</template>
......@@ -15,10 +19,20 @@ import Card from '@/components/Card'
export default {
components: { Card },
data() {
return { list: [] }
return {
swiperOptions: {
autoplay: true,
delay: 5000,
loop: true,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 10
},
list: []
}
},
async fetch() {
const params = { page: 1, per_page: 100, type: 71, project_id: 1013 }
const params = { page: 1, per_page: 10, type: 71, project_id: 1013 }
this.list = await this.$axios.$get('/api/zws/v1/cms/news', { params }).then(res => res)
}
}
......@@ -28,13 +42,38 @@ export default {
.tips {
font-size: 0.1rem;
font-weight: 500;
color: #424242;
margin-bottom: 0.1rem;
}
.my-swiper {
::v-deep .swiper-wrapper {
align-items: center;
}
.swiper-slide {
position: relative;
width: 2.1rem;
height: 1.22rem;
}
.swiper-slide-active {
width: 2.1rem;
height: 1.34rem;
}
}
.banner-img {
display: block;
width: 100%;
height: 1.51rem;
height: 100%;
object-fit: cover;
}
.banner-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0.24rem;
padding: 0 0.1rem;
font-size: 0.1rem;
line-height: 0.24rem;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
......@@ -42,10 +42,10 @@ export default {
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: ['vant/lib/index.css', '@/assets/css/base.css'],
css: ['vant/lib/index.css', 'swiper/css/swiper.css', '@/assets/css/base.css'],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: ['@/plugins/vant'],
plugins: ['@/plugins/vant', { src: '@/plugins/swiper' }],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
......
......@@ -10,7 +10,9 @@
"@nuxtjs/axios": "^5.13.1",
"core-js": "^3.9.1",
"nuxt": "^2.15.3",
"vant": "^2.12.10"
"swiper": "^5.4.5",
"vant": "^2.12.10",
"vue-awesome-swiper": "^4.1.1"
},
"devDependencies": {
"fibers": "^5.0.0",
......@@ -4296,6 +4298,14 @@
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
}
},
"node_modules/dom7": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
"integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
"dependencies": {
"ssr-window": "^2.0.0"
}
},
"node_modules/domain-browser": {
"version": "1.2.0",
"license": "MIT",
......@@ -9780,6 +9790,11 @@
"version": "1.0.3",
"license": "BSD-3-Clause"
},
"node_modules/ssr-window": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
},
"node_modules/ssri": {
"version": "8.0.1",
"license": "ISC",
......@@ -10098,6 +10113,23 @@
"boolbase": "~1.0.0"
}
},
"node_modules/swiper": {
"version": "5.4.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
"integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
"hasInstallScript": true,
"dependencies": {
"dom7": "^2.1.5",
"ssr-window": "^2.0.0"
},
"engines": {
"node": ">= 4.7.0"
},
"funding": {
"type": "patreon",
"url": "https://www.patreon.com/vladimirkharlampidi"
}
},
"node_modules/tapable": {
"version": "1.1.3",
"license": "MIT",
......@@ -10847,6 +10879,18 @@
"version": "2.6.12",
"license": "MIT"
},
"node_modules/vue-awesome-swiper": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
"integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ==",
"engines": {
"node": ">=8"
},
"peerDependencies": {
"swiper": "^5.2.0",
"vue": "2.x"
}
},
"node_modules/vue-client-only": {
"version": "2.0.0",
"license": "MIT"
......@@ -15147,6 +15191,14 @@
"entities": "^2.0.0"
}
},
"dom7": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
"integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
"requires": {
"ssr-window": "^2.0.0"
}
},
"domain-browser": {
"version": "1.2.0"
},
......@@ -18717,6 +18769,11 @@
"sprintf-js": {
"version": "1.0.3"
},
"ssr-window": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
},
"ssri": {
"version": "8.0.1",
"requires": {
......@@ -18940,6 +18997,15 @@
}
}
},
"swiper": {
"version": "5.4.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
"integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
"requires": {
"dom7": "^2.1.5",
"ssr-window": "^2.0.0"
}
},
"tapable": {
"version": "1.1.3"
},
......@@ -19388,6 +19454,12 @@
"vue": {
"version": "2.6.12"
},
"vue-awesome-swiper": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
"integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ==",
"requires": {}
},
"vue-client-only": {
"version": "2.0.0"
},
......
......@@ -12,7 +12,9 @@
"@nuxtjs/axios": "^5.13.1",
"core-js": "^3.9.1",
"nuxt": "^2.15.3",
"vant": "^2.12.10"
"swiper": "^5.4.5",
"vant": "^2.12.10",
"vue-awesome-swiper": "^4.1.1"
},
"devDependencies": {
"fibers": "^5.0.0",
......
......@@ -196,7 +196,6 @@ export default {
.t2 {
margin-top: 0.1rem;
font-size: 0.1rem;
color: #424242;
text-align: center;
}
}
......
......@@ -35,14 +35,14 @@ export default {
// 新闻详情
const data = await $axios.$get(`/api/zws/v1/cms/news/${params.id}`).then(res => res)
// 相关推荐
const requestParams = { page: 1, per_page: 100, type: 74, project_id: 1013 }
const requestParams = { page: 1, per_page: 2, type: 74, project_id: 1013 }
const list = await $axios.$get('/api/zws/v1/cms/news', { params: requestParams }).then(res => res)
return { data, list }
},
methods: {
formatDate(value) {
const date = new Date(value)
const date = new Date(value.replace(/\-/g, '/'))
return date.getFullYear() + '/' + date.getMonth() + 1 + '/' + date.getDate()
},
back() {
......@@ -59,7 +59,6 @@ export default {
border-top: 1px solid #e6e6e6;
.back {
font-size: 0.1rem;
color: #424242;
cursor: pointer;
}
.date {
......@@ -91,7 +90,6 @@ export default {
width: 0.82rem;
height: 0.2rem;
font-size: 0.1rem;
color: #424242;
line-height: 0.2rem;
text-align: center;
border: 1px solid #d3d3d3;
......
......@@ -35,14 +35,14 @@ export default {
// 新闻详情
const data = await $axios.$get(`/api/zws/v1/cms/news/${params.id}`).then(res => res)
// 相关推荐
const requestParams = { page: 1, per_page: 100, type: 71, project_id: 1013 }
const requestParams = { page: 1, per_page: 2, type: 71, project_id: 1013 }
const list = await $axios.$get('/api/zws/v1/cms/news', { params: requestParams }).then(res => res)
return { data, list }
},
methods: {
formatDate(value) {
const date = new Date(value)
const date = new Date(value.replace(/\-/g, '/'))
return date.getFullYear() + '/' + date.getMonth() + 1 + '/' + date.getDate()
},
back() {
......@@ -59,7 +59,6 @@ export default {
border-top: 1px solid #e6e6e6;
.back {
font-size: 0.1rem;
color: #424242;
cursor: pointer;
}
.date {
......@@ -91,7 +90,6 @@ export default {
width: 0.82rem;
height: 0.2rem;
font-size: 0.1rem;
color: #424242;
line-height: 0.2rem;
text-align: center;
border: 1px solid #d3d3d3;
......
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论