Skip to content

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

布展默认主题、中国风主题的适配调整

上级 98812ff0
隐藏空白字符变更
内嵌 并排
正在显示 包含 691 行增加 和 1007 行删除
src/components/EntranceIcon/index.vue
浏览文件 @ 8e562ed8
......@@ -51,8 +51,8 @@ export default {
height: 2px;
transform: rotate(45deg);
position: absolute;
right: -3px;
top: -5px;
right: -2px;
top: -3px;
}
}
</style>
src/views/culturalRelic/index.vue
浏览文件 @ 8e562ed8
......@@ -9,66 +9,66 @@
:span="2"
>
<el-col :span="6"> -->
<el-input
class="input item"
v-model="keyword"
placeholder="关键词"
@keyup.enter.native="search"
clearable
>
</el-input>
<!-- </el-col> -->
<el-input
class="input item"
v-model="keyword"
placeholder="请输入关键词"
@keyup.enter.native="search"
clearable
>
</el-input>
<!-- </el-col> -->
<!-- <el-col :span="6"> -->
<el-select
class="type item"
v-model="type"
placeholder="所属类别"
filterable
@change="handleTypeChange"
clearable
>
<el-option
v-for="(value, key) in dicts.culturalRelicType"
:key="key"
:label="value"
:value="key"
>
</el-option>
</el-select>
<!-- </el-col> -->
<!-- <el-col :span="6"> -->
<el-cascader
class="years item"
v-model="years"
:options="culturalRelicYears"
:props="culturalRelicYearsProps"
placeholder="请选择文物年代"
filterable
@change="handleYearsChange"
clearable
ref="years"
>
</el-cascader>
<!-- </el-col> -->
<el-col :span="3">
<div class="search-button" @click="search" style="width: 100%">
<svg-icon icon-class="search"></svg-icon>
检索
</div>
</el-col>
<!-- <el-col :span="6"> -->
<el-select
class="type item"
v-model="type"
placeholder="请选择所属类别"
filterable
@change="handleTypeChange"
clearable
>
<el-option
v-for="(value, key) in dicts.culturalRelicType"
:key="key"
:label="value"
:value="key"
>
</el-option>
</el-select>
<!-- </el-col> -->
<!-- <el-col :span="6"> -->
<el-cascader
class="years item"
v-model="years"
:options="culturalRelicYears"
:props="culturalRelicYearsProps"
placeholder="请选择文物年代"
filterable
@change="handleYearsChange"
clearable
ref="years"
>
</el-cascader>
<!-- </el-col> -->
<el-col :span="3">
<div class="search-button" @click="search" style="width: 100%">
<svg-icon icon-class="search"></svg-icon>
检索
</div>
</el-col>
<el-col :span="3" class="threeD" @click.native="handleClickThreeD">
<!-- <div class="threeD" @click="handleClickThreeD">
<el-col :span="3" class="threeD" @click.native="handleClickThreeD">
<!-- <div class="threeD" @click="handleClickThreeD">
<div class="box">
<i class="el-icon-check" v-show="onlyShow3d"></i>
</div>
</div> -->
<svg-icon
:icon-class="onlyShow3d ? 'filter-s' : 'filter'"
></svg-icon>
<div class="text">3D</div>
</el-col>
<svg-icon
:icon-class="onlyShow3d ? 'filter-s' : 'filter'"
></svg-icon>
<div class="text">3D文物</div>
</el-col>
<!-- </el-row> -->
</div>
<el-row :gutter="40" class="cr-list">
......@@ -148,7 +148,7 @@
<span>{{ item.deptName }}</span>
</div>
</div>
<div class="right">
<!-- <div class="right">
<span class="collect">
<svg-icon icon-class="collect"></svg-icon>
<span>{{
......@@ -159,7 +159,7 @@
<svg-icon icon-class="view"></svg-icon>
<span>{{ item.browseCount }}</span>
</span>
</div>
</div> -->
</div>
</div>
</div>
......@@ -337,6 +337,10 @@ $text-indent: 16px;
height: 214px;
.item {
margin-right: 20px;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
}
.input-icon {
height: 100%;
......@@ -349,23 +353,18 @@ $text-indent: 16px;
.threeD {
display: flex;
cursor: pointer;
font-size: 18px;
font-size: 20px;
color: #666;
margin-left: 20px;
transition: all ease .5s;
.svg-icon{
transition: all ease 0.3s;
// -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.4));
.svg-icon {
margin-right: 4px;
font-size: 20px;
font-size: 24px;
}
&:hover{
text-shadow: 0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #2069c4,
0 0 35px #2069c4,
0 0 40px #2069c4,
0 0 50px #2069c4,
0 0 75px #2069c4;
&:hover {
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}
// .box {
// width: 28px;
......@@ -393,10 +392,16 @@ $text-indent: 16px;
display: flex;
justify-content: center;
align-items: center;
background: url("@/assets/imgs/list/search-button-bg.png");
background: url("@/assets/imgs/list/search-button-bg.png") transparent;
background-size: 100% 100%;
color: #444;
font-size: 14px;
transition: all 0.2s ease;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
.svg-icon {
margin-right: 4px;
}
......
src/views/display/components/BlueStyle.vue
浏览文件 @ 8e562ed8
......@@ -21,256 +21,247 @@
></el-image>
</div>
<div class="wrapper wow animate__animated animate__fadeInUpBig">
<!-- 展览基本信息 -->
<div class="content-item display-detail_basic_info">
<div class="info-container">
<div
class="
info-container-left
wow
animate__animated animate__fadeInLeft
"
>
<!-- <swiper :options="swiperOption" ref="mySwiper">
<swiper-slide
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
>
<div
class="img-container"
@click="handelPreviewImages(displayDetail.imagesVo)"
>
<img :src="item.url" alt="" srcset="" />
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</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)"
<div class="inner">
<!-- 展览基本信息 -->
<div class="content-item display-detail_basic_info">
<div class="info-container">
<div
class="
info-container-left
wow
animate__animated animate__fadeInLeft
"
>
<el-carousel>
<el-carousel-item
v-for="(item, index) in displayDetail.imagesVo"
:key="index"
class="imagesVo-image-container"
>
<img src="@/assets/imgs/enlarge-s.png" alt="" />
<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
class="
info-container-right
wow
animate__animated animate__fadeInRight
"
>
<div class="info-title">
<span>{{ displayDetail.title }} </span>
<div class="view-count">
<svg-icon icon-class="view"></svg-icon>
<span>{{ displayDetail.browseCount }}</span>
</div>
</el-carousel-item>
</el-carousel>
</div>
<div
class="
info-container-right
wow
animate__animated animate__fadeInRight
"
>
<div class="info-title">
<span>{{ displayDetail.title }} </span>
<div class="view-count">
<svg-icon icon-class="view"></svg-icon>
<span>{{ displayDetail.browseCount }}</span>
</div>
</div>
<el-row :span="20">
<el-col :span="14" class="left">
<div class="basic-info">
<div class="body-item">
<span class="label">
<svg-icon icon-class="keyword"></svg-icon>
关键词：</span
>
<span class="value">{{ displayDetail.keyword }}</span>
</div>
<div class="body-item">
<span class="label">
<svg-icon icon-class="zllx"></svg-icon>展览类型：</span
>
<span class="value">{{
dicts.display_type[displayDetail.type]
}}</span>
</div>
<div class="body-item">
<span class="label">
<svg-icon icon-class="zlxz"></svg-icon>展览性质：</span
>
<span class="value">{{
dicts.display_character[displayDetail.displayCharacter]
}}</span>
<el-row :span="20">
<el-col :span="14" class="left">
<div class="basic-info">
<div class="body-item">
<span class="label">
<svg-icon icon-class="keyword"></svg-icon>
关键词：</span
>
<span class="value">{{ displayDetail.keyword }}</span>
</div>
<div class="body-item">
<span class="label">
<svg-icon icon-class="zllx"></svg-icon>展览类型：</span
>
<span class="value">{{
dicts.display_type[displayDetail.type]
}}</span>
</div>
<div class="body-item">
<span class="label">
<svg-icon icon-class="zlxz"></svg-icon>展览性质：</span
>
<span class="value">{{
dicts.display_character[displayDetail.displayCharacter]
}}</span>
</div>
<div class="body-item">
<span class="label"
><svg-icon icon-class="zldw"></svg-icon>展览单位：</span
>
<span class="value">{{ displayDetail.deptName }}</span>
</div>
<div class="body-item">
<span class="label"
><svg-icon icon-class="zldq"></svg-icon>展览地区：</span
>
<span class="value">{{ displayDetail.regionName }}</span>
</div>
</div>
<div class="body-item">
<span class="label"
><svg-icon icon-class="zldw"></svg-icon>展览单位：</span
>
<span class="value">{{ displayDetail.deptName }}</span>
</el-col>
<el-col :span="10" class="right">
<div class="qrcode">
<img
src="@/assets/imgs/display/normal/test-qrcode.png"
alt=""
/>
</div>
<div class="body-item">
<span class="label"
><svg-icon icon-class="zldq"></svg-icon>展览地区：</span
>
<span class="value">{{ displayDetail.regionName }}</span>
<div class="tools">
<ReaderOperations
:loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)"
:collectCount="displayDetail.collectCount"
:collectCountStatus="
Boolean(displayDetail.collectCountStatus)
"
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
:iconSize="24"
@reload="reload"
/>
</div>
</div>
</el-col>
<el-col :span="10" class="right">
<div class="qrcode">
<img
src="@/assets/imgs/display/normal/test-qrcode.png"
alt=""
/>
</div>
<div class="tools">
<ReaderOperations
:loveCount="displayDetail.loveCount"
:loveCountStatus="Boolean(displayDetail.loveCountStatus)"
:collectCount="displayDetail.collectCount"
:collectCountStatus="
Boolean(displayDetail.collectCountStatus)
"
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
:iconSize="24"
@reload="reload"
/>
</div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</div>
<div
class="audio wow animate__animated animate__fadeInRight"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<img src="@/assets/imgs/display/normal/music.png" alt="" />
<!-- <svg-icon icon-class="music"></svg-icon> -->
<AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
/>
</div>
</div>
<div
class="audio wow animate__animated animate__fadeInRight"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<img src="@/assets/imgs/display/normal/music.png" alt="" />
<!-- <svg-icon icon-class="music"></svg-icon> -->
<AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
/>
</div>
</div>
<!-- 展览简介 -->
<div class="content-item display-detail_intro">
<div class="intro-content wow animate__animated animate__fadeInLeft">
<div class="intro-title">
<svg-icon icon-class="jianjie"></svg-icon>
<span>展览简介</span>
<!-- 展览简介 -->
<div class="content-item display-detail_intro">
<div class="intro-content wow animate__animated animate__fadeInLeft">
<div class="intro-title">
<svg-icon icon-class="jianjie"></svg-icon>
<span>展览简介</span>
</div>
<div class="intro-content-container">
{{ displayDetail.intro }}
</div>
</div>
<div class="intro-content-container">
{{ displayDetail.intro }}
<div
class="intro-video wow animate__animated animate__fadeInRight"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
>
<el-carousel :interval="4000" type="card" indicator-position="none">
<el-carousel-item
v-for="item in displayDetail.videosVo"
:key="item.fileId"
>
<Video :url="$getFullUrl(item.url)" theme="blue" />
</el-carousel-item>
</el-carousel>
</div>
</div>
<!--展览单元 -->
<div
class="intro-video wow animate__animated animate__fadeInRight"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
class="content-item display-detail_units"
ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
<el-carousel :interval="4000" type="card" indicator-position="none">
<el-carousel-item
v-for="item in displayDetail.videosVo"
:key="item.fileId"
>
<Video :url="$getFullUrl(item.url)" theme="blue" />
</el-carousel-item>
</el-carousel>
</div>
</div>
<!--展览单元 -->
<div
class="content-item display-detail_units"
ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
>
<div class="custom_title wow animate__animated animate__fadeInUp">
<div class="desc">
<div class="divider"></div>
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
</div>
<div class="center">
<svg-icon icon-class="unit"></svg-icon>
<span class="title">展览单元</span>
</div>
<div class="desc">
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
<div class="divider"></div>
</div>
</div>
<div class="unit-container">
<div
class="unit-content-menu wow animate__animated animate__fadeInLeft"
>
<!-- 只能单开 unique-opened -->
<menu-list
:items="displayDetail.exhibitionUnits"
:isCollapse="false"
@open="handleOpenUnit"
style="height: 100%"
></menu-list>
<div class="custom_title wow animate__animated animate__fadeInUp">
<div class="desc">
<div class="divider"></div>
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
</div>
<div class="center">
<svg-icon icon-class="unit"></svg-icon>
<span class="title">展览单元</span>
</div>
<div class="desc">
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
<div class="divider"></div>
</div>
</div>
<div class="unit-content wow animate__animated animate__fadeInRight">
<div class="unit-container">
<div
class="text-indent unit-content_intro"
v-if="curUnit.intro"
v-html="curUnit.intro"
class="
unit-content-menu
wow
animate__animated animate__fadeInLeft
"
>
<!-- {{ curUnit.intro }} -->
<!-- 只能单开 unique-opened -->
<menu-list
:items="displayDetail.exhibitionUnits"
:isCollapse="false"
@open="handleOpenUnit"
style="height: 100%"
></menu-list>
</div>
<div
class="unit-content_images"
v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
class="unit-content wow animate__animated animate__fadeInRight"
>
<el-carousel
indicator-position="outside"
:autoplay="false"
height="600px"
:loop="false"
<div
class="text-indent unit-content_intro"
v-if="curUnit.intro"
v-html="curUnit.intro"
>
<el-carousel-item
v-for="item in curUnit.imagesVo"
:key="item.euId"
<!-- {{ curUnit.intro }} -->
</div>
<div
class="unit-content_images"
v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
>
<el-carousel
indicator-position="outside"
:autoplay="false"
height="600px"
:loop="false"
>
<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] }}
<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>
</div>
</el-carousel-item>
</el-carousel>
</el-carousel-item>
</el-carousel>
<!-- <el-col
<!-- <el-col
:span="24 / curUnit.imagesVo.length"
v-for="item in curUnit.imagesVo"
:key="item.euId"
......@@ -288,121 +279,125 @@
{{ item.name }}
</div>
</el-col> -->
</div>
<div
class="unit-content_videos"
v-if="curUnit.videosVo && curUnit.videosVo.length > 0"
>
<el-row :gutter="20">
<el-col
:span="24 / curUnit.videosVo.length"
v-for="item in curUnit.videosVo"
:key="item.euId"
>
<Video :url="$getFullUrl(item.url)" />
</el-col>
</el-row>
</div>
<div
class="unit-content_videos"
v-if="curUnit.videosVo && curUnit.videosVo.length > 0"
>
<el-row :gutter="20">
<el-col
:span="24 / curUnit.videosVo.length"
v-for="item in curUnit.videosVo"
:key="item.euId"
>
<Video :url="$getFullUrl(item.url)" />
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</div>
<!--展览相关文物 -->
<div
class="content-item display-detail_relateRc"
ref="units"
v-if="
displayDetail.culturalRelicVo &&
displayDetail.culturalRelicVo.length > 0
"
>
<el-row :gutter="26">
<el-col
:span="index == 0 ? 12 : 4"
v-for="(item, index) in displayDetail.culturalRelicVo"
:key="index"
>
<div
class="img-container wow animate__animated animate__fadeInUp"
@click="handleToCr(item)"
<!--展览相关文物 -->
<div
class="content-item display-detail_relateRc"
ref="units"
v-if="
displayDetail.culturalRelicVo &&
displayDetail.culturalRelicVo.length > 0
"
>
<el-row :gutter="26">
<el-col
:span="index == 0 ? 12 : 4"
v-for="(item, index) in displayDetail.culturalRelicVo"
:key="index"
>
<img :src="item.faceImagePressUrl || item.faceImageUrl" alt="" />
<div class="cr-name-intro" v-if="index == 0">
<div class="cr-name">{{ item.name }}</div>
<div class="cr-intro">{{ item.intro }}</div>
<div
class="img-container wow animate__animated animate__fadeInUp"
@click="handleToCr(item)"
>
<img
:src="item.faceImagePressUrl || item.faceImageUrl"
alt=""
/>
<div class="cr-name-intro" v-if="index == 0">
<div class="cr-name">{{ item.name }}</div>
<div class="cr-intro">{{ item.intro }}</div>
</div>
</div>
</el-col>
</el-row>
</div>
<!-- 相关文献 -->
<div
class="content-item display-detail_lts"
v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
>
<!-- <div class="wrapper"> -->
<div class="custom_title wow animate__animated animate__fadeInUp">
<div class="desc">
<div class="divider"></div>
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
</div>
<div class="center">
<svg-icon icon-class="wenxian"></svg-icon>
<span class="title">相关文献</span>
</div>
<div class="desc">
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
<div class="divider"></div>
</div>
</el-col>
</el-row>
</div>
<!-- 相关文献 -->
<div
class="content-item display-detail_lts"
v-if="
displayDetail.literatureVo && displayDetail.literatureVo.length > 0
"
>
<!-- <div class="wrapper"> -->
<div class="custom_title wow animate__animated animate__fadeInUp">
<div class="desc">
<div class="divider"></div>
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
</div>
<div class="center">
<svg-icon icon-class="wenxian"></svg-icon>
<span class="title">相关文献</span>
</div>
<div class="desc">
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
<div class="divider"></div>
<div class="lts-content wow animate__animated animate__fadeInUp">
<el-table
:data="displayDetail.literatureVo"
:header-cell-style="{
background: '#eeeeee',
color: '#333',
}"
:row-style="tableRowStyle"
>
<el-table-column
prop="name"
label="名称"
align="center"
></el-table-column>
<el-table-column
prop="authors"
label="作者"
align="center"
></el-table-column>
<el-table-column
prop="date"
label="出版时间"
align="center"
></el-table-column>
<el-table-column
align="center"
prop="source"
label="出版所在刊物"
></el-table-column>
<el-table-column label="阅读" align="center">
<template slot-scope="scope">
<div class="pdf-img" @click="handleViewLt(scope.row)">
<img src="@/assets/imgs/display/ch/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="lts-content wow animate__animated animate__fadeInUp">
<el-table
:data="displayDetail.literatureVo"
:header-cell-style="{
background: '#eeeeee',
color: '#333',
}"
:row-style="tableRowStyle"
>
<el-table-column
prop="name"
label="名称"
align="center"
></el-table-column>
<el-table-column
prop="authors"
label="作者"
align="center"
></el-table-column>
<el-table-column
prop="date"
label="出版时间"
align="center"
></el-table-column>
<el-table-column
align="center"
prop="source"
label="出版所在刊物"
></el-table-column>
<el-table-column label="阅读" align="center">
<template slot-scope="scope">
<div class="pdf-img" @click="handleViewLt(scope.row)">
<img src="@/assets/imgs/display/ch/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<el-image-viewer
......@@ -523,7 +518,7 @@ export default {
this.displayDetail.audiosVo &&
this.displayDetail.audiosVo.length > 0
) {
// this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$message.info("正在播放当前文物讲解音频，点击旋转按钮可关闭");
this.$refs.AudioPlayer.play();
}
});
......@@ -721,309 +716,315 @@ export default {
}
}
.wrapper {
width: 1200px;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
// width: 1200px;
padding: 0 13%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
margin: 36px 0 70px;
/**基本信息 */
.display-detail_basic_info {
.inner {
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
position: relative;
.info-container {
display: flex;
justify-content: space-between;
padding: 60px 36px;
height: 100%;
background-color: #fff;
.info-container-left {
min-height: 200px;
margin-right: 50px;
flex: 1;
overflow: hidden;
.imagesVo-image-container {
// position: relative;
.img-container {
height: 280px;
width: 100%;
img {
margin: 36px 0 70px;
/**基本信息 */
.display-detail_basic_info {
position: relative;
.info-container {
display: flex;
justify-content: space-between;
padding: 60px 36px;
height: 100%;
background-color: #fff;
.info-container-left {
min-height: 200px;
margin-right: 50px;
flex: 1;
overflow: hidden;
.imagesVo-image-container {
// position: relative;
.img-container {
height: 280px;
width: 100%;
height: 100%;
object-fit: cover;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
}
.info-container-right {
flex: 1;
min-height: 200px;
.info-container-right {
flex: 1;
min-height: 200px;
.info-title {
font-size: 28px;
font-weight: bold;
color: #444;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #f2f2f2;
.view-count {
font-size: 18px;
margin-top: 10px;
color: #999;
font-weight: normal;
.svg-icon {
margin-right: 10px;
.info-title {
font-size: 28px;
font-weight: bold;
color: #444;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #f2f2f2;
.view-count {
font-size: 18px;
margin-top: 10px;
color: #999;
font-weight: normal;
.svg-icon {
margin-right: 10px;
}
}
}
}
.basic-info {
.body-item {
display: flex;
.label {
.basic-info {
.body-item {
display: flex;
align-items: center;
width: 120px;
margin-right: 26px;
margin-bottom: 10px;
font-weight: bold;
color: #858585;
.svg-icon {
width: 24px;
height: 24px;
margin-right: 16px;
.label {
display: flex;
align-items: center;
width: 140px;
margin-right: 26px;
margin-bottom: 10px;
font-weight: bold;
color: #858585;
.svg-icon {
width: 24px;
height: 24px;
margin-right: 16px;
}
}
}
}
}
.right {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.qrcode {
margin-bottom: 28px;
.right {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
img {
width: 50%;
height: 100%;
}
}
.tools {
width: 100%;
.tools-item {
color: #858585;
flex: 1;
.qrcode {
margin-bottom: 28px;
display: flex;
align-items: center;
cursor: pointer;
.svg-icon {
width: 22px;
height: 22px;
margin-right: 8px;
}
.like {
color: #831122;
justify-content: center;
img {
width: 50%;
height: 100%;
}
.collect {
color: #2069c4;
}
.tools {
width: 100%;
.tools-item {
color: #858585;
flex: 1;
display: flex;
align-items: center;
cursor: pointer;
.svg-icon {
width: 22px;
height: 22px;
margin-right: 8px;
}
.like {
color: #831122;
}
.collect {
color: #2069c4;
}
}
}
}
}
}
}
.audio {
position: absolute;
right: -100px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 2px solid #2069c4;
padding: 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
transition: all 0.5s ease;
&:hover {
box-shadow: 0 0 14px rgb(0 0 0 / 40%);
}
.svg-icon {
color: #2069c4;
font-size: 80px;
}
img {
width: 60px;
height: 60px;
}
}
}
/**简介和视频 */
.display-detail_intro {
background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%;
display: flex;
.intro-content,
.intro-video {
flex: 1;
}
.intro-content {
padding: 20px;
margin: 20px;
line-height: 28px;
.intro-title {
font-size: 26px;
font-weight: 400;
color: #2069c4;
line-height: 90px;
.audio {
position: absolute;
right: -120px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
transform-origin: center center;
border: 2px solid #2069c4;
padding: 10px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
transition: all 0.5s ease;
&:hover {
box-shadow: 0 0 14px rgb(0 0 0 / 40%);
}
.svg-icon {
margin-right: 10px;
font-size: 36px;
color: #2069c4;
font-size: 80px;
}
img {
width: 60px;
height: 60px;
}
}
.intro-content-container {
text-indent: 34px;
}
}
}
/**展览单元 */
.display-detail_units {
overflow-x: hidden;
.unit-container {
height: 100%;
margin-bottom: 40px;
display: flex;
}
.unit-content-menu {
width: 360px;
margin-right: 40px;
}
.unit-content {
flex: 1;
padding: 40px;
/**简介和视频 */
.display-detail_intro {
background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%;
.unit-content_intro {
font-size: 16px;
font-weight: 400;
color: #444444;
line-height: 36px;
text-indent: 32px;
margin-bottom: 20px;
display: flex;
.intro-content,
.intro-video {
flex: 1;
}
.unit-content_images {
position: relative;
.unit-content_images_container {
height: 100%;
display: flex;
flex-direction: column;
.images_img {
flex: 1;
.intro-content {
padding: 20px;
margin: 20px;
line-height: 28px;
.intro-title {
font-size: 26px;
font-weight: 400;
color: #2069c4;
line-height: 90px;
.svg-icon {
margin-right: 10px;
font-size: 36px;
}
.desc {
}
.intro-content-container {
text-indent: 34px;
}
}
}
/**展览单元 */
.display-detail_units {
overflow-x: hidden;
.unit-container {
// height: 100%;
margin-bottom: 40px;
display: flex;
}
.unit-content-menu {
width: 360px;
margin-right: 40px;
}
.unit-content {
flex: 1;
padding: 40px;
background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%;
.unit-content_intro {
font-size: 16px;
font-weight: 400;
color: #444444;
line-height: 36px;
text-indent: 32px;
margin-bottom: 20px;
}
.unit-content_images {
position: relative;
.unit-content_images_container {
height: 100%;
display: flex;
justify-content: center;
height: 40px;
align-items: center;
flex-direction: column;
.images_img {
flex: 1;
}
.desc {
display: flex;
justify-content: center;
height: 40px;
align-items: center;
}
}
}
}
}
}
// 关联文物
.display-detail_relateRc {
height: 560px;
background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%;
padding: 50px 0;
.el-col {
&:first-child {
.img-container {
width: 100%;
height: 460px;
position: relative;
.cr-name-intro {
// 关联文物
.display-detail_relateRc {
height: 560px;
background-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%;
padding: 50px 0;
.el-col {
&:first-child {
.img-container {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
padding: 100px 28px 50px;
height: 460px;
position: relative;
background-image: linear-gradient(
to top,
rgba(0, 0, 0, 0.8),
rgba(0, 0, 0, 0.1)
);
.cr-name {
font-size: 48px;
font-weight: bold;
color: #ffffff;
text-align: center;
margin-bottom: 40px;
.cr-name-intro {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
padding: 100px 28px 50px;
background-image: linear-gradient(
to top,
rgba(0, 0, 0, 0.8),
rgba(0, 0, 0, 0.1)
);
.cr-name {
font-size: 48px;
font-weight: bold;
color: #ffffff;
text-align: center;
margin-bottom: 40px;
}
.cr-intro {
font-size: 16px;
font-weight: 400;
color: #ccc;
text-indent: 32px;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
}
.cr-intro {
font-size: 16px;
font-weight: 400;
color: #ccc;
text-indent: 32px;
line-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
img {
width: 100%;
height: 100%;
}
}
img {
width: 100%;
height: 100%;
}
&:not(&:first-child) {
margin-bottom: 30px;
.img-container {
height: 214px;
}
}
}
&:not(&:first-child) {
margin-bottom: 30px;
.img-container {
height: 214px;
.img-container {
width: 100%;
height: 100%;
cursor: pointer;
overflow: hidden;
&:hover {
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
img {
transform: scale(1.1);
}
}
}
}
.img-container {
width: 100%;
height: 100%;
cursor: pointer;
overflow: hidden;
&:hover {
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
img {
transform: scale(1.1);
width: 100%;
height: 214px;
object-fit: cover;
transition: all 0.5s ease;
}
}
img {
width: 100%;
height: 214px;
object-fit: cover;
transition: all 0.5s ease;
}
}
}
/**关联文献 */
.display-detail_lts {
background-color: #fafafa;
.lts-content {
flex: 1;
/**关联文献 */
.display-detail_lts {
background-color: #fafafa;
.lts-content {
flex: 1;
}
}
}
}
......
src/views/display/components/ChStyle-unit.vue
浏览文件 @ 8e562ed8
......@@ -163,6 +163,7 @@ export default {
}
.unit-node {
width: 1200px;
// width: calc(100vw - 26%);
height: 550px;
display: flex;
overflow: hidden;
......@@ -196,7 +197,7 @@ export default {
position: absolute;
top: 200px;
height: 70%;
padding: 0 20px;
padding: 0 80px;
}
}
}
......
src/views/display/components/ChStyle.vue
浏览文件 @ 8e562ed8
......@@ -463,7 +463,8 @@ export default {
// 中国风主题样式
/**公共样式开始 */
.wrapper {
width: 1200px;
// width: 1200px;
width: calc(100% - 26%); //左右两边各自留13%
}
.custom-title {
display: flex;
......@@ -546,6 +547,7 @@ export default {
filter: drop-shadow(2px 4px 6px #f8f8f8);
img {
transform: translateX(-10px);
width: 1230px;
}
}
.left-layer,
......@@ -609,7 +611,7 @@ export default {
}
}
.tools {
width: 230px;
width: 280px;
}
}
......@@ -661,7 +663,7 @@ export default {
.audio {
position: absolute;
right: -100px;
right: -120px;
top: 34px;
cursor: pointer;
animation: audioRotate 8s linear infinite;
......
src/views/display/index.vue
浏览文件 @ 8e562ed8
......@@ -8,7 +8,7 @@
<el-input
class="input item"
v-model="keyword"
placeholder="关键词"
placeholder="请输入关键词"
@keyup.enter.native="search"
clearable
>
......@@ -19,7 +19,7 @@
<el-select
class="type item"
v-model="type"
placeholder="所属类别"
placeholder="请选择所属类别"
filterable
@change="handleTypeChange"
clearable
......@@ -124,7 +124,7 @@
<span>{{ item.deptName }}</span>
</div>
</div>
<div class="right">
<!-- <div class="right">
<span class="collect">
<svg-icon icon-class="collect"></svg-icon>
<span>{{
......@@ -135,7 +135,7 @@
<svg-icon icon-class="view"></svg-icon>
<span>{{ item.browseCount }}</span>
</span>
</div>
</div> -->
</div>
</div>
</div>
......@@ -320,6 +320,10 @@ $text-indent: 16px;
padding: 90px 70px 80px;
.item {
margin-right: 20px;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
}
.input-icon {
height: 100%;
......@@ -342,6 +346,10 @@ $text-indent: 16px;
font-size: 14px;
width: 156px;
height: 40px;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
// height: 100%;
.svg-icon {
margin-right: 4px;
......
src/views/home/components/Virtural.vue
浏览文件 @ 8e562ed8
......@@ -109,7 +109,7 @@ $blue: #2069c4;
.intro {
font-family: "Alibaba PuHuiTi";
color: #ffffff;
margin-top: 74px;
margin-top: 110px;
.name {
margin-bottom: 27px;
font-size: 20px;
......
src/views/home/index-manual.vue deleted 100644 → 0
浏览文件 @ 98812ff0
<template>
<div id="wrap" :style="{ height: screenHeight + 'px' }">
<div id="main" :style="{ top: nowTop + 'px' }">
<ul
id="pageUl"
type="circle"
v-for="(item, index) in buttons"
:key="index"
>
<li :id="item" :class="{ item, active: curIndex == index + 1 }">
&nbsp;
</li>
</ul>
<div id="page1" class="page">
<!-- <NavBar :class="[curIndex != 1 ? 'navBarFixed' : 'navBar']" /> -->
<NavBar class='navBar'/>
<Boutique class="home-item" ref="Boutique" />
</div>
<div id="page2" class="page">
<Virtural class="home-item" ref="Virtural" />
</div>
<div id="page3" class="page">
<CulturalRelic class="home-item" ref="CulturalRelic" />
</div>
<div id="page4" class="page">
<Display class="home-item" ref="Display" />
</div>
<div id="page5" class="page">
<MuseumMap class="home-item" ref="MuseumMap" />
</div>
<!-- <div id="page6" class="page">
<Footer />
</div> -->
<div class="down-arrow">
<img src="@/assets/imgs/home/down.png" alt="" />
</div>
</div>
</div>
</template>
<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import Boutique from "./components/Boutique.vue";
import MuseumMap from "./components/MuseumMap.vue";
import Virtural from "./components/Virtural.vue";
import Display from "./components/Display.vue";
import CulturalRelic from "./components/CulturalRelic.vue";
export default {
components: {
NavBar,
Footer,
MuseumMap,
Boutique,
Virtural,
Display,
CulturalRelic,
},
name: "Home",
data() {
return {
screenWeight: 0, // 屏幕宽度
screenHeight: 0, // 屏幕高度
index: 1, // 用于判断翻页
curIndex: 1, // 当前页的index
startTime: 0, // 翻屏起始时间
endTime: 0, // 上一次翻屏结束时间
nowTop: 0, // 翻屏后top的位置
pageNum: 0, // 一共有多少页
main: Object,
obj: Object,
buttons: [
"pageUlLi1",
"pageUlLi2",
"pageUlLi3",
"pageUlLi4",
"pageUlLi5",
],
navBarFixed: false,
};
},
mounted() {
this.screenWeight = document.documentElement.clientWidth;
this.screenHeight = document.documentElement.clientHeight;
this.main = document.getElementById("main");
this.obj = document.getElementsByTagName("div");
for (let i = 0; i < this.obj.length; i++) {
if (this.obj[i].className == "page") {
this.obj[i].style.height = this.screenHeight + "px";
}
}
this.pageNum = document.querySelectorAll(".page").length;
// 浏览器兼容
if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
document.addEventListener("DOMMouseScroll", this.scrollFun, false);
} else if (document.addEventListener) {
document.addEventListener("mousewheel", this.scrollFun, false);
} else if (document.attachEvent) {
document.attachEvent("onmousewheel", this.scrollFun);
} else {
document.onmousewheel = this.scrollFun;
}
},
methods: {
scrollFun(event) {
this.startTime = new Date().getTime();
// mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
// DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
let delta = event.detail || -event.wheelDelta;
// 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
if (this.startTime - this.endTime > 1000) {
if (
delta > 0 &&
parseInt(this.main.offsetTop) >=
-(this.screenHeight * (this.pageNum - 2))
) {
// 向下滚动
this.index++;
this.toPage(this.index);
} else if (delta < 0 && parseInt(this.main.offsetTop) < 0) {
// 向上滚动
this.index--;
this.toPage(this.index);
}
// 本次翻页结束，记录结束时间，用于下次判断
this.endTime = new Date().getTime();
}
},
// 翻页
toPage(index) {
if (index != this.curIndex) {
let delta = index - this.curIndex;
this.nowTop = this.nowTop - delta * this.screenHeight;
this.curIndex = index;
}
},
},
};
</script>
<style lang="scss" scoped>
html,
body {
height: 100%;
}
body,
ul,
li,
a,
p,
div {
/*慎删*/
padding: 0px;
margin: 0px;
}
#wrap {
overflow: hidden;
width: 100%;
}
#main {
position: relative;
transition: top 1.5s;
}
.page {
/*谨删*/
width: 100%;
margin: 0;
}
#pageUl {
position: fixed;
right: 10px;
bottom: 50%;
}
.active {
color: red;
}
#page1 {
position: relative;
flex-direction: column;
.navBar {
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.25); // left: 0;
transition: all 1s ease;
}
.navBarFixed {
position: fixed;
top: 0;
z-index: 999;
background: #2069c4;
transition: all 1s ease;
}
}
.home-item {
height: 100%;
}
.down-arrow {
position: fixed;
bottom: 20px;
left: 0;
right: 0;
display: flex;
justify-content: center;
animation: arrowBounce 2s infinite;
z-index: 999;
}
@keyframes arrowBounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
</style>
\ No newline at end of file
src/views/home/index-swiper.vue deleted 100644 → 0
浏览文件 @ 98812ff0
<template>
<div>
<swiper id="swiperBox" :options="swiperOption" ref="mySwiper">
<swiper-slide class="swiper-slide">
<NavBar class="NavBar"/>
<Boutique class="home-item" ref="Boutique" />
</swiper-slide>
<swiper-slide class="swiper-slide">
<Virtural class="home-item" ref="Virtural" />
</swiper-slide>
<swiper-slide class="swiper-slide">
<CulturalRelic class="home-item" ref="CulturalRelic" />
</swiper-slide>
<swiper-slide class="swiper-slide">
<Display class="home-item" ref="Display" />
</swiper-slide>
<swiper-slide class="swiper-slide">
<MuseumMap class="home-item" ref="MuseumMap" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<Footer/>
</div>
</template>
<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import Boutique from "./components/Boutique.vue";
import MuseumMap from "./components/MuseumMap.vue";
import Virtural from "./components/Virtural.vue";
import Display from "./components/Display.vue";
import CulturalRelic from "./components/CulturalRelic.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
components: {
NavBar,
Footer,
swiper,
swiperSlide,
MuseumMap,
Boutique,
Virtural,
Display,
CulturalRelic,
},
name: "Home",
data() {
return {
list: [1, 2, 3, 4],
swiperOption: {
notNextTick: true, //notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
direction: "vertical", //垂直方向移动
grabCursor: true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
slidesPerView: 1, //设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
mousewheel: true, //开启鼠标滚轮控制Swiper切换。可设置鼠标选项，默认值false
mousewheelControl: true, //同上
height: window.innerHeight, // 高度设置，占满设备高度
resistanceRatio: 0, //抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。本业务需要
observeParents: true, //将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
// 分页器
pagination: {
el: ".swiper-pagination",
bulletClass: "my-bullet", //自定义分页器样式
bulletActiveClass: "my-bullet-active", //自定义当前选中样式
clickable: true, //点击切换轮播
},
},
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
},
},
};
</script>
<style lang="scss" scoped>
.my-bullet {
display: block;
width: 11px;
height: 11px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
margin: 10px 0;
}
.my-bullet-active {
width: 11px;
height: 25px;
background: #fff;
border-radius: 20px;
margin: 10px 0;
}
.home-item {
height: 100vh;
width: 100%;
}
.navBar {
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.25); // left: 0;
transition: all 1s ease;
}
</style>
\ No newline at end of file
src/views/museum/index.vue
浏览文件 @ 8e562ed8
......@@ -9,7 +9,7 @@
class="input item"
suffix-icon="el-icon-search"
v-model="keyword"
placeholder="关键词"
placeholder="请输入关键词"
@keyup.enter.native="search"
clearable
>
......
src/views/virtual/index.vue
浏览文件 @ 8e562ed8
......@@ -7,7 +7,7 @@
<el-input
class="input item"
v-model="keyword"
placeholder="关键词"
placeholder="请输入关键词"
@keyup.enter.native="search"
clearable
>
......@@ -286,6 +286,10 @@ $text-indent: 16px;
margin-bottom: 63px;
.item {
margin-right: 20px;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
}
.input-icon {
height: 100%;
......@@ -307,6 +311,10 @@ $text-indent: 16px;
background-size: 100% 100%;
color: #444;
font-size: 14px;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
.svg-icon {
margin-right: 4px;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论