Skip to content

E
exhibition_page
提交 8aa60d1e authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

修改布展单元轮播样式

上级 08eebc68
显示空白字符变更
内嵌 并排
正在显示 包含 98 行增加 和 64 行删除
src/assets/imgs/list/banner3.png deleted 100644 → 0
浏览文件 @ 08eebc68
差异被折叠。
src/components/Breadcrumb/index.vue
浏览文件 @ 8aa60d1e
<template> <template>
<el-breadcrumb separator-class="el-icon-arrow-right" > <el-breadcrumb separator-class="el-icon-arrow-right" :class="{ 'is-light': isLight }">
<el-breadcrumb-item v-for="(item, index) in list" :key="index" :to="{ path: item.path }">{{ item.name }}</el-breadcrumb-item> <el-breadcrumb-item v-for="(item, index) in list" :key="index" :to="{ path: item.path }">{{ item.name
}}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</template> </template>
...@@ -17,22 +18,42 @@ export default { ...@@ -17,22 +18,42 @@ export default {
path: "/" path: "/"
} }
] ]
},
isLight: {
type: Boolean,
default: false
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-breadcrumb__inner{ ::v-deep .el-breadcrumb__inner {
color:#666; color: #666;
font-size: 18px; font-size: 18px;
} }
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner{ ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
color: $themeColor; color: $themeColor;
} }
::v-deep .el-breadcrumb__inner.is-link:hover{ ::v-deep .el-breadcrumb__inner.is-link:hover {
color: #b5800a; color: #b5800a;
} }
.isLight {
::v-deep .el-breadcrumb__inner {
color: #ccc;
font-size: 18px;
}
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
color: #fff;
}
::v-deep .el-breadcrumb__inner.is-link:hover {
color: #b5800a;
}
}
</style> </style>
\ No newline at end of file
src/components/SlideImageGroup/index.vue
浏览文件 @ 8aa60d1e
<template> <template>
<div class="slide-img-group"> <div class="slide-img-group">
<div class="list"> <div class="list">
<swiper <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
class="swiper gallery-thumbs" <swiper-slide class="slide-item" v-for="(item, index) in imgList" :key="index" @click="handleClickItem(item)">
:options="swiperOptionThumbs"
ref="swiperThumbs"
>
<swiper-slide
class="slide-item"
v-for="(item, index) in imgList"
:key="index"
@click="handleClickItem(item)"
>
<!-- <img :src="item.pressUrl || item.faceImagePressUrl" alt="" /> --> <!-- <img :src="item.pressUrl || item.faceImagePressUrl" alt="" /> -->
<div class="img-container" @click="handelPreviewImages(imgList,index)"> <div class="img-container" @click="handelPreviewImages(imgList, index)">
<slot name="img" :item="item"></slot> <slot name="img" :item="item"></slot>
</div> </div>
<slot name="info" :item="item" /> <slot name="info" :item="item" />
...@@ -26,6 +17,10 @@ ...@@ -26,6 +17,10 @@
<span>查看大图</span> <span>查看大图</span>
</div> --> </div> -->
</swiper-slide> </swiper-slide>
<!--分页器。如果放置在swiper外面，需要自定义样式。-->
</swiper>
<div class="swiper-pagination" slot="pagination"></div> <div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-next swiper-button-white" slot="button-next"> <div class="swiper-button-next swiper-button-white" slot="button-next">
<i class="el-icon-arrow-right"></i> <i class="el-icon-arrow-right"></i>
...@@ -34,19 +29,13 @@ ...@@ -34,19 +29,13 @@
<i class="el-icon-arrow-left"></i> <i class="el-icon-arrow-left"></i>
</div> </div>
<!--分页器。如果放置在swiper外面，需要自定义样式。-->
</swiper>
</div> </div>
<el-image-viewer <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="previewList"
v-if="imgViewerVisible" :initial-index="initialIndex" />
:on-close="closeImgViewer"
:url-list="previewList"
:initial-index="initialIndex"
/>
</div> </div>
</template> </template>
<script> <script>
import { swiper, swiperSlide } from "vue-awesome-swiper"; import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css"; import "swiper/dist/css/swiper.css";
export default { export default {
...@@ -88,16 +77,16 @@ export default { ...@@ -88,16 +77,16 @@ export default {
}, },
}, },
imgViewerVisible: false, imgViewerVisible: false,
initialIndex:0 initialIndex: 0
}; };
}, },
mounted() {}, mounted() { },
methods: { methods: {
handelPreviewImages(items,index) { handelPreviewImages(items, index) {
this.imgViewerVisible = true; this.imgViewerVisible = true;
this.previewList = items.map((item) => this.$getFullUrl(item.url)); this.previewList = items.map((item) => this.$getFullUrl(item.url));
this.initialIndex =index this.initialIndex = index
}, },
closeImgViewer() { closeImgViewer() {
this.imgViewerVisible = false; this.imgViewerVisible = false;
...@@ -112,17 +101,25 @@ export default { ...@@ -112,17 +101,25 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.slide-img-group { .slide-img-group {
height: 100%; // height: 100%;
height: 240px;
.list{
position: relative;
display: flex;
justify-content: center;
}
} }
.swiper-container { .swiper-container {
// padding: 0 60px; // padding: 0 60px;
width:calc(100% - 140px);
// overflow-y: auto;
::v-deep .swiper-wrapper { ::v-deep .swiper-wrapper {
display: flex; display: flex;
// justify-content: center; // justify-content: center;
} }
} }
.list, .list,
.swiper, .swiper,
.swiper-wrapper { .swiper-wrapper {
...@@ -140,12 +137,14 @@ export default { ...@@ -140,12 +137,14 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-bottom: 10px; padding-bottom: 10px;
.img-container { .img-container {
width: 100%; width: 100%;
// height: 100%; // height: 100%;
background: #f5f5f9; background: #f5f5f9;
height: 200px; height: 200px;
cursor: pointer; cursor: pointer;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -153,19 +152,23 @@ export default { ...@@ -153,19 +152,23 @@ export default {
} }
} }
} }
.swiper-button-next, .swiper-button-next,
.swiper-button-prev { .swiper-button-prev {
background-image: none; background-image: none;
width: 60px;
height: 60px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: $themeColor;
font-weight: bolder; font-weight: bolder;
font-size: 28px; font-size: 32px;
width: 56px;
height: 56px;
border-radius: 50%;
background-color: rgba($themeColor,0.4);
transform: translateY(-20px); transform: translateY(-20px);
color: #333;
} }
.enlarge { .enlarge {
position: absolute; position: absolute;
bottom: 19px; bottom: 19px;
...@@ -181,6 +184,7 @@ export default { ...@@ -181,6 +184,7 @@ export default {
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
padding: 4px 8px; padding: 4px 8px;
img { img {
width: 12px; width: 12px;
height: 12px; height: 12px;
...@@ -188,8 +192,16 @@ export default { ...@@ -188,8 +192,16 @@ export default {
} }
} }
::v-deep .swiper-pagination-bullets{ ::v-deep .swiper-pagination-bullets {
bottom: 0; bottom:-10px;
.swiper-pagination-bullet{
margin-right: 10px;
width: 10px;
height: 10px;
}
.swiper-pagination-bullet-active{
background: $themeColor;
}
} }
</style> </style>
......
src/views/boutique/components/YLGDYW.vue
浏览文件 @ 8aa60d1e
...@@ -2,33 +2,33 @@ ...@@ -2,33 +2,33 @@
<div class="ylg"> <div class="ylg">
<div class="face-and-intro"> <div class="face-and-intro">
<div class="bg"> <div class="bg">
<img src="@/assets/imgs/boutique/ylgdyw-10/1_faceImage/bg.jpg" alt="" /> <img src="@/assets/imgs/boutique/ylgdyw/1_faceImage/bg.jpg" alt="" />
</div> </div>
<div <div
class="cr-1 wow animate__animated animate__fadeInRight" class="cr-1 wow animate__animated animate__fadeInRight"
data-wow-duration="1s" data-wow-duration="1s"
> >
<img <img
src="@/assets/imgs/boutique/ylgdyw-10/1_faceImage/cr-1.png" src="@/assets/imgs/boutique/ylgdyw/1_faceImage/cr-1.png"
alt="" alt=""
/> />
</div> </div>
<div class="cr-2 wow animate__animated animate__fadeInLeft"> <div class="cr-2 wow animate__animated animate__fadeInLeft">
<img <img
src="@/assets/imgs/boutique/ylgdyw-10/1_faceImage/cr-2.png" src="@/assets/imgs/boutique/ylgdyw/1_faceImage/cr-2.png"
alt="" alt=""
/> />
</div> </div>
<div class="title-group"> <div class="title-group">
<div class="subtitle wow animate__animated animate__fadeInLeft"> <div class="subtitle wow animate__animated animate__fadeInLeft">
<img <img
src="@/assets/imgs/boutique/ylgdyw-10/1_faceImage/subtitle.png" src="@/assets/imgs/boutique/ylgdyw/1_faceImage/subtitle.png"
alt="" alt=""
/> />
</div> </div>
<div class="title wow animate__animated animate__fadeInLeft"> <div class="title wow animate__animated animate__fadeInLeft">
<img <img
src="@/assets/imgs/boutique/ylgdyw-10/1_faceImage/title.png" src="@/assets/imgs/boutique/ylgdyw/1_faceImage/title.png"
alt="" alt=""
/> />
</div> </div>
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
<div class="intro wow animate__animated animate__fadeIn"> <div class="intro wow animate__animated animate__fadeIn">
<div class="intro-title"> <div class="intro-title">
<img <img
src="@/assets/imgs/boutique/ylgdyw-10/1_faceImage/intro-title.png" src="@/assets/imgs/boutique/ylgdyw/1_faceImage/intro-title.png"
alt="" alt=""
/> />
</div> </div>
...@@ -55,13 +55,13 @@ ...@@ -55,13 +55,13 @@
<div class="map-group"> <div class="map-group">
<div class="map wow animate__animated animate__fadeInUp"> <div class="map wow animate__animated animate__fadeInUp">
<img <img
src="@/assets/imgs/boutique/ylgdyw-10/1_faceImage/map.png" src="@/assets/imgs/boutique/ylgdyw/1_faceImage/map.png"
alt="" alt=""
/> />
</div> </div>
<div class="under-map"> <div class="under-map">
<img <img
src="@/assets/imgs/boutique/ylgdyw-10/1_faceImage/under-map.png" src="@/assets/imgs/boutique/ylgdyw/1_faceImage/under-map.png"
alt="" alt=""
/> />
</div> </div>
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
<div class="text"> <div class="text">
<img <img
:src=" :src="
require(`@/assets/imgs/boutique/ylgdyw-10/2_unit/${ require(`@/assets/imgs/boutique/ylgdyw/2_unit/${
currentUnit == item || currentHoverItem == item currentUnit == item || currentHoverItem == item
? item.img + '-s' ? item.img + '-s'
: item.img : item.img
...@@ -137,20 +137,20 @@ ...@@ -137,20 +137,20 @@
<div class="img-container"> <div class="img-container">
<img <img
:src=" :src="
require(`@/assets/imgs/boutique/ylgdyw-10/2_unit/${v.imgName}`) require(`@/assets/imgs/boutique/ylgdyw/2_unit/${v.imgName}`)
" "
alt="" alt=""
/> />
</div> </div>
<div class="left-line" v-if="key == 0"> <div class="left-line" v-if="key == 0">
<img <img
src="@/assets/imgs/boutique/ylgdyw-10/2_unit/right-line.png" src="@/assets/imgs/boutique/ylgdyw/2_unit/right-line.png"
alt="" alt=""
/> />
</div> </div>
<div class="right-line" v-if="key == 1"> <div class="right-line" v-if="key == 1">
<img <img
src="@/assets/imgs/boutique/ylgdyw-10/2_unit/left-line.png" src="@/assets/imgs/boutique/ylgdyw/2_unit/left-line.png"
alt="" alt=""
/> />
</div> </div>
...@@ -177,16 +177,16 @@ ...@@ -177,16 +177,16 @@
</div> </div>
</div> </div>
<div class="gap-bg wow animate__animated animate__fadeIn"> <div class="gap-bg wow animate__animated animate__fadeIn">
<img src="@/assets/imgs/boutique/ylgdyw-10/3_museum/bg.png" alt="" /> <img src="@/assets/imgs/boutique/ylgdyw/3_museum/bg.png" alt="" />
</div> </div>
<div class="musuem"> <div class="musuem">
<div class="bg"> <div class="bg">
<img src="@/assets/imgs/boutique/ylgdyw-10/4_crs/bg.png" alt="" /> <img src="@/assets/imgs/boutique/ylgdyw/4_crs/bg.png" alt="" />
</div> </div>
<div class="info wow animate__animated animate__fadeInUp"> <div class="info wow animate__animated animate__fadeInUp">
<div class="musuem-title"> <div class="musuem-title">
<img <img
src="@/assets/imgs/boutique/ylgdyw-10/3_museum/title.png" src="@/assets/imgs/boutique/ylgdyw/3_museum/title.png"
alt="" alt=""
/> />
</div> </div>
...@@ -197,7 +197,7 @@ ...@@ -197,7 +197,7 @@
<div class="cr-group wow animate__animated animate__fadeInUp"> <div class="cr-group wow animate__animated animate__fadeInUp">
<div class="title"> <div class="title">
<img <img
src="@/assets/imgs/boutique/ylgdyw-10/4_crs/title.png" src="@/assets/imgs/boutique/ylgdyw/4_crs/title.png"
alt="" alt=""
/> />
</div> </div>
...@@ -211,7 +211,7 @@ ...@@ -211,7 +211,7 @@
<div class="img-container"> <div class="img-container">
<img <img
:src=" :src="
require(`@/assets/imgs/boutique/ylgdyw-10/4_crs/${item.imgName}`) require(`@/assets/imgs/boutique/ylgdyw/4_crs/${item.imgName}`)
" "
alt="" alt=""
/> />
...@@ -674,7 +674,7 @@ $themeYellow: #e7ce45; ...@@ -674,7 +674,7 @@ $themeYellow: #e7ce45;
} }
.name { .name {
background-image: url("@/assets/imgs/boutique/ylgdyw-10/2_unit/text-border.png"); background-image: url("@/assets/imgs/boutique/ylgdyw/2_unit/text-border.png");
background-size: 100% 100%; background-size: 100% 100%;
padding: 20px 10px; padding: 20px 10px;
font-size: 28px; font-size: 28px;
......
src/views/boutique/index-old.vue
浏览文件 @ 8aa60d1e
...@@ -55,7 +55,7 @@ export default { ...@@ -55,7 +55,7 @@ export default {
tabs: [ tabs: [
{ tab: "smgz", name: "神秘贵州" }, { tab: "smgz", name: "神秘贵州" },
{ tab: "jyycc", name: "记忆与传承" }, { tab: "jyycc", name: "记忆与传承" },
{ tab: "ylgdyw", name: "夜郎国的疑问" }, { tab: "ylgdyw", name: "夜郎的疑问" },
{ tab: "sdcs", name: "四渡赤水出奇兵" }, { tab: "sdcs", name: "四渡赤水出奇兵" },
{ tab: "lzsg", name: "六枝梭戛" }, { tab: "lzsg", name: "六枝梭戛" },
{ tab: "zggz", name: "中共贵州省工委斗争纪略展" }, { tab: "zggz", name: "中共贵州省工委斗争纪略展" },
......
src/views/boutique/index.vue
浏览文件 @ 8aa60d1e
<template> <template>
<div class="botique"> <div class="botique">
<SMGZ v-if="currentTitle == '神秘贵州'" /> <SMGZ v-if="currentTitle == '神秘贵州'" />
<YLGDYW v-else-if="currentTitle == '夜郎国的疑问'" /> <YLGDYW v-else-if="currentTitle == '夜郎的疑问'" />
<JYYCC v-else-if="currentTitle == '记忆与传承'" /> <JYYCC v-else-if="currentTitle == '记忆与传承'" />
<SDCS v-else-if="currentTitle == '四渡赤水出奇兵'" /> <SDCS v-else-if="currentTitle == '四渡赤水出奇兵'" />
<JYSG v-else-if="currentTitle == '贵州教育史馆'" /> <JYSG v-else-if="currentTitle == '贵州教育史馆'" />
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<script> <script>
// import mTabs from '@/views/home/components/Boutique.vue' // import mTabs from '@/views/home/components/Boutique.vue'
import SMGZ from "./components/SMGZ"; //神秘贵州 import SMGZ from "./components/SMGZ"; //神秘贵州
import YLGDYW from "./components/YLGDYW"; //夜郎国的疑问 import YLGDYW from "./components/YLGDYW"; //夜郎的疑问
import JYYCC from "./components/jyycc"; //技艺与传承 import JYYCC from "./components/jyycc"; //技艺与传承
import SDCS from "./components/sdcs"; //四渡赤水 import SDCS from "./components/sdcs"; //四渡赤水
import JYSG from "./components/jysg"; //教育史馆 import JYSG from "./components/jysg"; //教育史馆
...@@ -41,7 +41,7 @@ export default { ...@@ -41,7 +41,7 @@ export default {
case "记忆与传承": case "记忆与传承":
color = "6"; color = "6";
break; break;
case "夜郎国的疑问": case "夜郎的疑问":
color = "7"; color = "7";
break; break;
// case "cjm": // case "cjm":
......
src/views/display/boutiqueTitles.js
浏览文件 @ 8aa60d1e
...@@ -4,7 +4,7 @@ export var titles = [ ...@@ -4,7 +4,7 @@ export var titles = [
"神秘贵州", "神秘贵州",
"四渡赤水出奇兵", "四渡赤水出奇兵",
"记忆与传承", "记忆与传承",
"夜郎国的疑问", "夜郎的疑问",
"贵州教育史馆", "贵州教育史馆",
"中国贵州六枝梭戛生态博物馆", "中国贵州六枝梭戛生态博物馆",
"中共贵州省工委旧址纪念馆" "中共贵州省工委旧址纪念馆"
......
src/views/display/components/NormalStyle.vue
浏览文件 @ 8aa60d1e
...@@ -985,7 +985,7 @@ $titleFontFamily: SourceHanSerifCN-Bold; ...@@ -985,7 +985,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.tab-item { .tab-item {
height: 100%; height: 100%;
margin-right: 20px; margin-right: 40px;
color: $themeColor; color: $themeColor;
font-size: 24px; font-size: 24px;
font-family: $titleFontFamily; font-family: $titleFontFamily;
......
vue.config.js
浏览文件 @ 8aa60d1e
...@@ -52,7 +52,7 @@ module.exports = defineConfig({ ...@@ -52,7 +52,7 @@ module.exports = defineConfig({
// target: 'http://192.168.1.230:9562/api',//测试内网 // target: 'http://192.168.1.230:9562/api',//测试内网
// target: 'http://222.85.214.245:9602/api',//测试外网 // target: 'http://222.85.214.245:9602/api',//测试外网
// target: 'http://114.115.157.218:9602/api',//生产 // target: 'http://114.115.157.218:9602/api',//生产
target:'http://www.gzswbsy.com/api', target:'https://www.gzswbsy.com/api',
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/api': '' '^/api': ''
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论