Skip to content

P
project-online-pc
提交 eaacef54 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

feat: 新增校园一览

上级 6449b173
隐藏空白字符变更
内嵌 并排
正在显示 包含 729 行增加 和 16 行删除
app.html
浏览文件 @ eaacef54
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<body {{ BODY_ATTRS }}> <body {{ BODY_ATTRS }}>
{{ APP }} {{ APP }}
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="./wx.js"></script> <script src="/wx.js"></script>
<script> <script>
var _hmt = _hmt || [] var _hmt = _hmt || []
;(function() { ;(function() {
......
components/base/h5/Menu.vue
浏览文件 @ eaacef54
...@@ -19,6 +19,10 @@ export default { ...@@ -19,6 +19,10 @@ export default {
name: this.$t('menu.project'), name: this.$t('menu.project'),
path: '/project' path: '/project'
}, },
{
name: '校园一览',
path: '/campusList/campusList'
},
{ {
name: '学习安排', name: '学习安排',
path: '/plan' path: '/plan'
...@@ -35,7 +39,7 @@ export default { ...@@ -35,7 +39,7 @@ export default {
children: [ children: [
{ name: '申请要求', path: '/guides/requirements' }, { name: '申请要求', path: '/guides/requirements' },
{ name: '申请流程', path: '/guides/process' }, { name: '申请流程', path: '/guides/process' },
{ name: '报名材料', path: '/guides/material' }, { name: '报名材料', path: '/guides/material' }
// { name: '学费信息', path: '/guides/tuition' } // { name: '学费信息', path: '/guides/tuition' }
] ]
}, },
......
components/layout/pc/Menu.vue
浏览文件 @ eaacef54
...@@ -51,6 +51,10 @@ export default { ...@@ -51,6 +51,10 @@ export default {
name: this.$t('menu.project'), name: this.$t('menu.project'),
path: '/project' path: '/project'
}, },
{
name: '校园一览',
path: '/campusList/campusList'
},
{ {
name: '学习安排', name: '学习安排',
path: '/plan' path: '/plan'
...@@ -67,7 +71,7 @@ export default { ...@@ -67,7 +71,7 @@ export default {
children: [ children: [
{ name: '申请要求', path: '/guides/requirements' }, { name: '申请要求', path: '/guides/requirements' },
{ name: '申请流程', path: '/guides/process' }, { name: '申请流程', path: '/guides/process' },
{ name: '报名材料', path: '/guides/material' }, { name: '报名材料', path: '/guides/material' }
// { name: '学费信息', path: '/guides/tuition' } // { name: '学费信息', path: '/guides/tuition' }
] ]
}, },
......
nuxt.config.js
浏览文件 @ eaacef54
...@@ -42,7 +42,19 @@ export default { ...@@ -42,7 +42,19 @@ export default {
css: ['vant/lib/index.css', '@ezijing/vue-form/dist/vue-form.css', 'assets/theme/index.css', 'assets/css/base.css'], css: ['vant/lib/index.css', '@ezijing/vue-form/dist/vue-form.css', 'assets/theme/index.css', 'assets/css/base.css'],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: ['@/plugins/vant', '@/plugins/i18n', '@/plugins/router', '@/plugins/axios', '@/plugins/element-ui'], plugins: [
'@/plugins/vant',
'@/plugins/i18n',
'@/plugins/router',
'@/plugins/axios',
'@/plugins/element-ui',
{ src: '@/plugins/vue-lazyload.js', ssr: false },
{
// 引入一个插件，这里的 ssr 表示使用服务端渲染
src: 'plugins/vue-swiper.js',
ssr: false
}
],
// Auto import components: https://go.nuxtjs.dev/config-components // Auto import components: https://go.nuxtjs.dev/config-components
components: true, components: true,
......
package-lock.json
浏览文件 @ eaacef54
...@@ -23,12 +23,12 @@ ...@@ -23,12 +23,12 @@
"vant": "^2.12.21", "vant": "^2.12.21",
"viewerjs": "^1.9.0", "viewerjs": "^1.9.0",
"vue-awesome-swiper": "^4.1.1", "vue-awesome-swiper": "^4.1.1",
"vue-i18n": "^8.24.4" "vue-i18n": "^8.24.4",
"vue-lazyload": "^1.3.4"
}, },
"devDependencies": { "devDependencies": {
"sass": "^1.32.11", "sass": "^1.32.11",
"sass-loader": "^10.1.1", "sass-loader": "^10.1.1"
"vue-lazyload": "^1.2.3"
} }
}, },
"node_modules/@babel/code-frame": { "node_modules/@babel/code-frame": {
...@@ -11279,6 +11279,11 @@ ...@@ -11279,6 +11279,11 @@
"vue": ">= 2.6.0" "vue": ">= 2.6.0"
} }
}, },
"node_modules/vant/node_modules/vue-lazyload": {
"version": "1.2.3",
"resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
"integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
},
"node_modules/vary": { "node_modules/vary": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
...@@ -11331,9 +11336,9 @@ ...@@ -11331,9 +11336,9 @@
"integrity": "sha512-RZE94WUAGxEiBAANxQ0pptbRwDkNKNSXl3fnJslpFOxVMF6UkUtMDSuYGuW2blDrVgweIXVpethOVkYoNNT9xw==" "integrity": "sha512-RZE94WUAGxEiBAANxQ0pptbRwDkNKNSXl3fnJslpFOxVMF6UkUtMDSuYGuW2blDrVgweIXVpethOVkYoNNT9xw=="
}, },
"node_modules/vue-lazyload": { "node_modules/vue-lazyload": {
"version": "1.2.3", "version": "1.3.5",
"resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.2.3.tgz", "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.5.tgz",
"integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g==" "integrity": "sha512-SCO/LWgCCbjaregHO4wg2buzITBdPBZRlIS104vERGpT88uxXsK26veuzZpgGAXMR8WpkaR+JDqz80OedpaLiA=="
}, },
"node_modules/vue-loader": { "node_modules/vue-loader": {
"version": "15.9.6", "version": "15.9.6",
...@@ -22304,6 +22309,13 @@ ...@@ -22304,6 +22309,13 @@
"@vant/popperjs": "^1.0.0", "@vant/popperjs": "^1.0.0",
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0", "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"vue-lazyload": "1.2.3" "vue-lazyload": "1.2.3"
},
"dependencies": {
"vue-lazyload": {
"version": "1.2.3",
"resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
"integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
}
} }
}, },
"vary": { "vary": {
...@@ -22352,9 +22364,9 @@ ...@@ -22352,9 +22364,9 @@
"integrity": "sha512-RZE94WUAGxEiBAANxQ0pptbRwDkNKNSXl3fnJslpFOxVMF6UkUtMDSuYGuW2blDrVgweIXVpethOVkYoNNT9xw==" "integrity": "sha512-RZE94WUAGxEiBAANxQ0pptbRwDkNKNSXl3fnJslpFOxVMF6UkUtMDSuYGuW2blDrVgweIXVpethOVkYoNNT9xw=="
}, },
"vue-lazyload": { "vue-lazyload": {
"version": "1.2.3", "version": "1.3.5",
"resolved": "https://registry.npmjs.org/vue-lazyload/-/vue-lazyload-1.2.3.tgz", "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.5.tgz",
"integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g==" "integrity": "sha512-SCO/LWgCCbjaregHO4wg2buzITBdPBZRlIS104vERGpT88uxXsK26veuzZpgGAXMR8WpkaR+JDqz80OedpaLiA=="
}, },
"vue-loader": { "vue-loader": {
"version": "15.9.6", "version": "15.9.6",
......
package.json
浏览文件 @ eaacef54
...@@ -25,11 +25,11 @@ ...@@ -25,11 +25,11 @@
"vant": "^2.12.21", "vant": "^2.12.21",
"viewerjs": "^1.9.0", "viewerjs": "^1.9.0",
"vue-awesome-swiper": "^4.1.1", "vue-awesome-swiper": "^4.1.1",
"vue-i18n": "^8.24.4" "vue-i18n": "^8.24.4",
"vue-lazyload": "^1.3.4"
}, },
"devDependencies": { "devDependencies": {
"sass": "^1.32.11", "sass": "^1.32.11",
"sass-loader": "^10.1.1", "sass-loader": "^10.1.1"
"vue-lazyload": "^1.2.3"
} }
} }
pages/campusList/campusList.vue 0 → 100644
浏览文件 @ eaacef54
<template>
<div class="main_content">
<TabContent @tabChange="tabChange" />
<div class="main_content_list">
<div class="list_con" v-for="(item, index) in swiperList" :key="index">
<img v-lazy="item.img_small" class="con_imgSmall" @click="handleShowPic(index)" />
</div>
</div>
<div class="swiper-content" v-show="isShowSwiper === true">
<div v-swiper:mySwiper="swiperOption" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, indexItem) in swiperList" :key="indexItem">
<img v-lazy="item.img_big" class="img_big" />
<img
src="https://webapp-pub.ezijing.com/project/cbu-online/swiper_next.png"
alt=""
class="swiper_next"
@click="handleNext(indexItem)"
/>
<img
src="https://webapp-pub.ezijing.com/project/cbu-online/swiper_prev.png"
alt=""
class="swiper_prev"
@click="handlePrev(indexItem)"
/>
</div>
</div>
</div>
</div>
<div class="overlay" @click="handleClose" v-if="isShowSwiper === true"></div>
</div>
</template>
<script>
import TabContent from './components/TabContent.vue'
import 'swiper/css/swiper.css'
export default {
layout: 'normal',
components: {
TabContent
},
data() {
return {
campusList: [
{
list: [
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/library15_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/library15_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/library16_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/library16_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/library1_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/library1_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/library2_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/library2_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/library12_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/library12_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/library13_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/library11_2.jpeg'
},
// {
// img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/library3_1.png',
// img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/library3_2.png'
// },
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/library4_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/library4_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/library5_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/library5_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/library6_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/library6_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/library7_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/library7_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/library8_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/library8_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/library9_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/library9_2.png'
}
]
},
{
list: [
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory2_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory2_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory1_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory1_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory3_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory3_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory4_1.jpeg',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory4_2.jpeg'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory5_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory5_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory6_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory6_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory7_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory7_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory8_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory8_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory10_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory10_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory11_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory11_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory12_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory12_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory9_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/laboratory9_2.png'
}
]
},
{
list: [
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant3_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant3_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant1_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant1_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant5_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant5_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant7_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant7_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant2_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant2_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant4_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant4_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant6_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant6_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant8_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant8_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant9_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant9_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant10_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant10_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant11_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant11_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant12_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant12_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant13_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant13_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant14_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant14_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant15_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/restaurant15_2.jpeg'
}
]
},
{
list: [
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/playField1_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/playField1_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/playField2_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/playField2_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/playField3_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/playField3_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/playField4_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/playField4_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/playField5_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/playField5_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/playField7_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/playField7_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/playField8_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/playField8_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/playField9_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/playField9_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/playField10_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/playField10_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/playField11_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/playField11_2.jpeg'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/playField12_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/playField12_2.jpeg'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/playField13_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/playField13_2.jpeg'
}
]
},
{
list: [
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery13_1.jpeg',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery13_2.jpeg'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery1_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery1_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery2_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery2_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery3_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery3_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery4_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery4_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery5_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery5_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery6_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery6_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery7_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery7_2.png'
},
// {
// img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery8_1.png',
// img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery8_2.png'
// },
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery9_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery9_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery10_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery10_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery11_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery11_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery14_1.jpeg',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/schoolSenery14_2.jpeg'
}
]
},
{
list: [
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/activity1_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/activity1_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/activity2_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/activity2_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/activity3_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/activity3_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/activity4_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/activity4_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/activity5_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/activity5_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/activity7_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/activity7_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/activity8_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/activity8_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/activity9_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/activity9_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/activity10_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/activity10_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/activity11_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/activity11_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/activity12_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/activity12_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/activity13_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/activity13_2.jpeg'
}
]
},
{
list: [
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation1_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation1_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation2_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation2_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation3_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation3_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation4_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation4_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation5_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation5_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation6_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation6_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation7_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation7_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation8_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation8_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation9_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation9_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation10_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation10_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation11_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation11_2.png'
},
{
img_small: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation12_1.png',
img_big: 'https://webapp-pub.ezijing.com/project/cbu-online/graduation12_2.png'
}
]
}
],
showIndex: 0,
isShowSwiper: false,
swiperOption: {
observer: true,
observeParents: true,
speed: 300,
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 20
}
}
},
methods: {
// tab切换
tabChange(n) {
this.showIndex = n
},
// 展示大图
handleShowPic(index) {
this.isShowSwiper = true
this.swiper.slideTo(index)
},
// 关闭遮罩层
handleClose() {
this.isShowSwiper = false
},
// 轮播下一张图
handleNext(indexItem) {
if (indexItem < this.swiperList.length - 1) {
this.swiper.slideNext()
} else {
this.$message('这已经是最后一张图片')
}
},
// 轮播上一张图
handlePrev(indexItem) {
if (indexItem <= 0) {
this.$message('这已经是第一张图片')
} else {
this.swiper.slidePrev()
}
}
},
computed: {
isMobile() {
return this.$store.state.isMobile
},
swiper() {
return this.$refs.mySwiper.swiper
},
swiperList() {
return this.campusList[this.showIndex].list
}
}
}
</script>
<style lang="scss" scoped>
.is-pc {
.main_content {
width: 1200px;
margin: 30px auto;
.main_content_list {
margin-top: 38px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
.list_con {
height: 434px;
}
.con_imgSmall {
width: 100%;
height: 100%;
cursor: pointer;
border-radius: 10px;
&:hover {
box-shadow: 0px 3px 25px 1px rgba(0, 0, 0, 0.26);
}
}
}
.overlay {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.5);
}
}
.swiper-content {
width: 1200px;
margin: 30px auto;
position: fixed;
z-index: 2000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.swiper-wrapper {
display: flex;
.swiper-slide {
.img_big {
width: 100%;
height: 675px;
border-radius: 10px;
}
.swiper_next {
position: absolute;
right: 30px;
top: 50%;
cursor: pointer;
}
.swiper_prev {
position: absolute;
left: 30px;
top: 50%;
cursor: pointer;
}
}
}
}
}
.is-h5 {
.main_content {
margin: 20px;
.main_content_list {
margin-top: 20px;
display: grid;
gap: 20px;
.con_imgSmall {
width: 100%;
cursor: pointer;
border-radius: 10px;
&:hover {
box-shadow: 0px 3px 25px 1px rgba(0, 0, 0, 0.26);
}
}
}
.overlay {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.5);
}
}
.swiper-content {
width: 90%;
margin: 30px auto;
position: fixed;
z-index: 2000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.swiper-wrapper {
display: flex;
.swiper-slide {
.img_big {
width: 100%;
max-height: 100%;
border-radius: 10px;
}
.swiper_next {
position: absolute;
right: 30px;
top: 50%;
cursor: pointer;
}
.swiper_prev {
position: absolute;
left: 30px;
top: 50%;
cursor: pointer;
}
}
}
}
}
</style>
pages/campusList/components/TabContent.vue 0 → 100644
浏览文件 @ eaacef54
<template>
<ul class="tab-content">
<li
v-for="(item, index) in items"
:key="index"
:class="activeIndex === index && 'active'"
@click="tabChange(index)"
>
{{ item }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: ['图书馆', '实验室', '餐厅&住宿', '运动场', '校园风光', '校园活动', '毕业典礼'],
activeIndex: 0
}
},
methods: {
tabChange(n) {
this.activeIndex = n
this.$emit('tabChange', n)
}
}
}
</script>
<style lang="scss" scoped>
.tab-content {
// padding-top: 0.2rem;
display: flex;
justify-content: center;
overflow-x: auto;
li {
min-width: 106px;
height: 38px;
text-align: center;
line-height: 38px;
font-size: 20px;
font-weight: bold;
color: #333333;
position: relative;
margin-left: 16px;
cursor: pointer;
&.active {
background: #aa1941;
border-radius: 8px 8px 8px 8px;
color: #ffffff;
cursor: pointer;
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论