Skip to content

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

修改布展单元轮播样式

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