Skip to content

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

布展介绍和单元修改为支持富文本字符串、浏览器自适应适配

上级 b8a9d4c9
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 110 行增加 和 34 行删除
src/main.js
浏览文件 @ d0d69782
...@@ -18,7 +18,7 @@ import { ...@@ -18,7 +18,7 @@ import {
getFullUrl getFullUrl
} from '@/utils/index' } from '@/utils/index'
import './permission' import './permission'
// import '@/rem' import '@/rem'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(ElementUI); Vue.use(ElementUI);
......
src/views/display/components/BlueStyle.vue
浏览文件 @ d0d69782
...@@ -12,7 +12,11 @@ ...@@ -12,7 +12,11 @@
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
> >
<el-image <el-image
:src="$getFullUrl(displayDetail.faceImagePressUrl || displayDetail.faceImageUrl)" :src="
$getFullUrl(
displayDetail.faceImagePressUrl || displayDetail.faceImageUrl
)
"
fit="cover" fit="cover"
></el-image> ></el-image>
</div> </div>
...@@ -27,7 +31,7 @@ ...@@ -27,7 +31,7 @@
animate__animated animate__fadeInLeft animate__animated animate__fadeInLeft
" "
> >
<swiper :options="swiperOption" ref="mySwiper"> <!-- <swiper :options="swiperOption" ref="mySwiper">
<swiper-slide <swiper-slide
v-for="(item, index) in displayDetail.imagesVo" v-for="(item, index) in displayDetail.imagesVo"
:key="index" :key="index"
...@@ -40,9 +44,29 @@ ...@@ -40,9 +44,29 @@
</div> </div>
</swiper-slide> </swiper-slide>
<div class="swiper-pagination" slot="pagination"></div> <div class="swiper-pagination" slot="pagination"></div>
<!-- <div class="swiper-button-prev" slot="button-prev"></div> --> <div class="swiper-button-prev" slot="button-prev"></div>
<!-- <div class="swiper-button-next" slot="button-next"></div> --> <div class="swiper-button-next" slot="button-next"></div>
</swiper> </swiper> -->
<el-carousel>
<el-carousel-item
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
class="imagesVo-image-container"
>
<div
class="img-container"
@click="handelPreviewImages(displayDetail.imagesVo)"
>
<img :src="item.url" alt="点击查看大图" srcset="" />
</div>
<div
class="enlarge"
@click="handelPreviewImages(displayDetail.imagesVo)"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
</el-carousel-item>
</el-carousel>
</div> </div>
<div <div
class=" class="
...@@ -206,15 +230,47 @@ ...@@ -206,15 +230,47 @@
></menu-list> ></menu-list>
</div> </div>
<div class="unit-content wow animate__animated animate__fadeInRight"> <div class="unit-content wow animate__animated animate__fadeInRight">
<div class="text-indent unit-content_intro" v-if="curUnit.intro"> <div
{{ curUnit.intro }} class="text-indent unit-content_intro"
v-if="curUnit.intro"
v-html="curUnit.intro"
>
<!-- {{ curUnit.intro }} -->
</div> </div>
<div <div
class="unit-content_images" class="unit-content_images"
v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0" v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
> >
<el-row :gutter="20"> <el-carousel
<el-col indicator-position="outside"
:autoplay="false"
height="600px"
:loop="false"
>
<el-carousel-item
v-for="item in curUnit.imagesVo"
:key="item.euId"
>
<div class="unit-content_images_container">
<el-image
:src="$getFullUrl(item.pressUrl)"
fit="contain"
class="images_img"
></el-image>
<div
class="enlarge"
@click="handelPreviewImages(curUnit.imagesVo)"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
<div class="desc">
{{ item.name.split(".")[0] }}
</div>
</div>
</el-carousel-item>
</el-carousel>
<!-- <el-col
:span="24 / curUnit.imagesVo.length" :span="24 / curUnit.imagesVo.length"
v-for="item in curUnit.imagesVo" v-for="item in curUnit.imagesVo"
:key="item.euId" :key="item.euId"
...@@ -231,8 +287,7 @@ ...@@ -231,8 +287,7 @@
<div class="unit-content_images_desc"> <div class="unit-content_images_desc">
{{ item.name }} {{ item.name }}
</div> </div>
</el-col> </el-col> -->
</el-row>
</div> </div>
<div <div
class="unit-content_videos" class="unit-content_videos"
...@@ -618,13 +673,35 @@ export default { ...@@ -618,13 +673,35 @@ export default {
.divider { .divider {
flex: 1; flex: 1;
height: 6px; height: 6px;
background: url("@/assets/imgs/display/normal/divider.png") 100% 100% repeat-x; background: url("@/assets/imgs/display/normal/divider.png") 100% 100%
repeat-x;
img { img {
width: 100%; width: 100%;
} }
} }
} }
} }
.enlarge {
position: absolute;
bottom: 40px;
right: 40px;
display: flex;
z-index: 9;
background-color: #c1925b;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
cursor: pointer;
img {
width: 24px;
height: 24px;
}
}
/**公共样式结束 */ /**公共样式结束 */
/**样式开始 */ /**样式开始 */
...@@ -667,16 +744,19 @@ export default { ...@@ -667,16 +744,19 @@ export default {
margin-right: 50px; margin-right: 50px;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
.imagesVo-image-container {
// position: relative;
.img-container { .img-container {
height: 280px; height: 280px;
width: 100%; width: 100%;
}
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
} }
}
}
.info-container-right { .info-container-right {
flex: 1; flex: 1;
min-height: 200px; min-height: 200px;
...@@ -841,30 +921,20 @@ export default { ...@@ -841,30 +921,20 @@ export default {
text-indent: 32px; text-indent: 32px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.unit-content_images_container { .unit-content_images {
position: relative; position: relative;
.unit-content_images_desc { .unit-content_images_container {
height: 100%;
display: flex; display: flex;
justify-content: center; flex-direction: column;
.images_img {
flex: 1;
} }
.enlarge { .desc {
position: absolute;
bottom: 60px;
right: 40px;
display: flex;
z-index: 9;
background-color: #c1925b;
width: 40px;
height: 40px;
border-radius: 12px;
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 40px;
align-items: center; align-items: center;
margin-right: 10px;
cursor: pointer;
img {
width: 24px;
height: 24px;
} }
} }
} }
......
src/views/display/index.vue
浏览文件 @ d0d69782
...@@ -440,14 +440,21 @@ $text-indent: 16px; ...@@ -440,14 +440,21 @@ $text-indent: 16px;
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
.left { .left {
flex: 1;
.deptName { .deptName {
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
color: #444444; color: #444444;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
} }
} }
.right { .right {
color: #858484; color: #858484;
width: 120px;
.collect { .collect {
margin-right: 10px; margin-right: 10px;
} }
...@@ -479,7 +486,6 @@ $text-indent: 16px; ...@@ -479,7 +486,6 @@ $text-indent: 16px;
font-weight: bold; font-weight: bold;
} }
::v-deep .el-input, ::v-deep .el-input,
.el-cascader { .el-cascader {
.el-input__inner { .el-input__inner {
...@@ -503,7 +509,7 @@ $text-indent: 16px; ...@@ -503,7 +509,7 @@ $text-indent: 16px;
} }
::v-deep .el-input { ::v-deep .el-input {
width: auto !important;; width: auto !important;
} }
::v-deep .el-pager { ::v-deep .el-pager {
li { li {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论