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 { ...@@ -51,8 +51,8 @@ export default {
height: 2px; height: 2px;
transform: rotate(45deg); transform: rotate(45deg);
position: absolute; position: absolute;
right: -3px; right: -2px;
top: -5px; top: -3px;
} }
} }
</style> </style>
src/views/culturalRelic/index.vue
浏览文件 @ 8e562ed8
...@@ -9,66 +9,66 @@ ...@@ -9,66 +9,66 @@
:span="2" :span="2"
> >
<el-col :span="6"> --> <el-col :span="6"> -->
<el-input <el-input
class="input item" class="input item"
v-model="keyword" v-model="keyword"
placeholder="关键词" placeholder="请输入关键词"
@keyup.enter.native="search" @keyup.enter.native="search"
clearable clearable
> >
</el-input> </el-input>
<!-- </el-col> --> <!-- </el-col> -->
<!-- <el-col :span="6"> --> <!-- <el-col :span="6"> -->
<el-select <el-select
class="type item" class="type item"
v-model="type" v-model="type"
placeholder="所属类别" placeholder="请选择所属类别"
filterable filterable
@change="handleTypeChange" @change="handleTypeChange"
clearable clearable
> >
<el-option <el-option
v-for="(value, key) in dicts.culturalRelicType" v-for="(value, key) in dicts.culturalRelicType"
:key="key" :key="key"
:label="value" :label="value"
:value="key" :value="key"
> >
</el-option> </el-option>
</el-select> </el-select>
<!-- </el-col> --> <!-- </el-col> -->
<!-- <el-col :span="6"> --> <!-- <el-col :span="6"> -->
<el-cascader <el-cascader
class="years item" class="years item"
v-model="years" v-model="years"
:options="culturalRelicYears" :options="culturalRelicYears"
:props="culturalRelicYearsProps" :props="culturalRelicYearsProps"
placeholder="请选择文物年代" placeholder="请选择文物年代"
filterable filterable
@change="handleYearsChange" @change="handleYearsChange"
clearable clearable
ref="years" ref="years"
> >
</el-cascader> </el-cascader>
<!-- </el-col> --> <!-- </el-col> -->
<el-col :span="3"> <el-col :span="3">
<div class="search-button" @click="search" style="width: 100%"> <div class="search-button" @click="search" style="width: 100%">
<svg-icon icon-class="search"></svg-icon> <svg-icon icon-class="search"></svg-icon>
检索 检索
</div> </div>
</el-col> </el-col>
<el-col :span="3" class="threeD" @click.native="handleClickThreeD"> <el-col :span="3" class="threeD" @click.native="handleClickThreeD">
<!-- <div class="threeD" @click="handleClickThreeD"> <!-- <div class="threeD" @click="handleClickThreeD">
<div class="box"> <div class="box">
<i class="el-icon-check" v-show="onlyShow3d"></i> <i class="el-icon-check" v-show="onlyShow3d"></i>
</div> </div>
</div> --> </div> -->
<svg-icon <svg-icon
:icon-class="onlyShow3d ? 'filter-s' : 'filter'" :icon-class="onlyShow3d ? 'filter-s' : 'filter'"
></svg-icon> ></svg-icon>
<div class="text">3D</div> <div class="text">3D文物</div>
</el-col> </el-col>
<!-- </el-row> --> <!-- </el-row> -->
</div> </div>
<el-row :gutter="40" class="cr-list"> <el-row :gutter="40" class="cr-list">
...@@ -148,7 +148,7 @@ ...@@ -148,7 +148,7 @@
<span>{{ item.deptName }}</span> <span>{{ item.deptName }}</span>
</div> </div>
</div> </div>
<div class="right"> <!-- <div class="right">
<span class="collect"> <span class="collect">
<svg-icon icon-class="collect"></svg-icon> <svg-icon icon-class="collect"></svg-icon>
<span>{{ <span>{{
...@@ -159,7 +159,7 @@ ...@@ -159,7 +159,7 @@
<svg-icon icon-class="view"></svg-icon> <svg-icon icon-class="view"></svg-icon>
<span>{{ item.browseCount }}</span> <span>{{ item.browseCount }}</span>
</span> </span>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -337,6 +337,10 @@ $text-indent: 16px; ...@@ -337,6 +337,10 @@ $text-indent: 16px;
height: 214px; height: 214px;
.item { .item {
margin-right: 20px; margin-right: 20px;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
} }
.input-icon { .input-icon {
height: 100%; height: 100%;
...@@ -349,23 +353,18 @@ $text-indent: 16px; ...@@ -349,23 +353,18 @@ $text-indent: 16px;
.threeD { .threeD {
display: flex; display: flex;
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 20px;
color: #666; color: #666;
margin-left: 20px; margin-left: 20px;
transition: all ease .5s; transition: all ease 0.3s;
.svg-icon{ // -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.4));
.svg-icon {
margin-right: 4px; margin-right: 4px;
font-size: 20px; font-size: 24px;
} }
&:hover{ &:hover {
text-shadow: 0 0 5px #fff, -webkit-box-reflect: below 2px
0 0 10px #fff, linear-gradient(transparent, rgba(0, 0, 0, 0.5));
0 0 15px #fff,
0 0 20px #2069c4,
0 0 35px #2069c4,
0 0 40px #2069c4,
0 0 50px #2069c4,
0 0 75px #2069c4;
} }
// .box { // .box {
// width: 28px; // width: 28px;
...@@ -393,10 +392,16 @@ $text-indent: 16px; ...@@ -393,10 +392,16 @@ $text-indent: 16px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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%; background-size: 100% 100%;
color: #444; color: #444;
font-size: 14px; 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 { .svg-icon {
margin-right: 4px; margin-right: 4px;
} }
......
src/views/display/components/BlueStyle.vue
浏览文件 @ 8e562ed8
...@@ -21,256 +21,247 @@ ...@@ -21,256 +21,247 @@
></el-image> ></el-image>
</div> </div>
<div class="wrapper wow animate__animated animate__fadeInUpBig"> <div class="wrapper wow animate__animated animate__fadeInUpBig">
<!-- 展览基本信息 --> <div class="inner">
<div class="content-item display-detail_basic_info"> <!-- 展览基本信息 -->
<div class="info-container"> <div class="content-item display-detail_basic_info">
<div <div class="info-container">
class=" <div
info-container-left class="
wow info-container-left
animate__animated animate__fadeInLeft wow
" animate__animated animate__fadeInLeft
> "
<!-- <swiper :options="swiperOption" ref="mySwiper"> >
<swiper-slide <el-carousel>
v-for="(item, index) in displayDetail.imagesVo" <el-carousel-item
:key="index" v-for="(item, index) in displayDetail.imagesVo"
> :key="index"
<div class="imagesVo-image-container"
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)"
> >
<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> </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>
</div>
<el-row :span="20"> <el-row :span="20">
<el-col :span="14" class="left"> <el-col :span="14" class="left">
<div class="basic-info"> <div class="basic-info">
<div class="body-item"> <div class="body-item">
<span class="label"> <span class="label">
<svg-icon icon-class="keyword"></svg-icon> <svg-icon icon-class="keyword"></svg-icon>
关键词：</span 关键词：</span
> >
<span class="value">{{ displayDetail.keyword }}</span> <span class="value">{{ displayDetail.keyword }}</span>
</div> </div>
<div class="body-item"> <div class="body-item">
<span class="label"> <span class="label">
<svg-icon icon-class="zllx"></svg-icon>展览类型：</span <svg-icon icon-class="zllx"></svg-icon>展览类型：</span
> >
<span class="value">{{ <span class="value">{{
dicts.display_type[displayDetail.type] dicts.display_type[displayDetail.type]
}}</span> }}</span>
</div> </div>
<div class="body-item"> <div class="body-item">
<span class="label"> <span class="label">
<svg-icon icon-class="zlxz"></svg-icon>展览性质：</span <svg-icon icon-class="zlxz"></svg-icon>展览性质：</span
> >
<span class="value">{{ <span class="value">{{
dicts.display_character[displayDetail.displayCharacter] dicts.display_character[displayDetail.displayCharacter]
}}</span> }}</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>
<div class="body-item"> </el-col>
<span class="label" <el-col :span="10" class="right">
><svg-icon icon-class="zldw"></svg-icon>展览单位：</span <div class="qrcode">
> <img
<span class="value">{{ displayDetail.deptName }}</span> src="@/assets/imgs/display/normal/test-qrcode.png"
alt=""
/>
</div> </div>
<div class="body-item"> <div class="tools">
<span class="label" <ReaderOperations
><svg-icon icon-class="zldq"></svg-icon>展览地区：</span :loveCount="displayDetail.loveCount"
> :loveCountStatus="Boolean(displayDetail.loveCountStatus)"
<span class="value">{{ displayDetail.regionName }}</span> :collectCount="displayDetail.collectCount"
:collectCountStatus="
Boolean(displayDetail.collectCountStatus)
"
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
:iconSize="24"
@reload="reload"
/>
</div> </div>
</div> </el-col>
</el-col> </el-row>
<el-col :span="10" class="right"> </div>
<div class="qrcode"> </div>
<img <div
src="@/assets/imgs/display/normal/test-qrcode.png" class="audio wow animate__animated animate__fadeInRight"
alt="" :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
/> @click="handleClickAudio"
</div> v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
<div class="tools"> >
<ReaderOperations <img src="@/assets/imgs/display/normal/music.png" alt="" />
:loveCount="displayDetail.loveCount" <!-- <svg-icon icon-class="music"></svg-icon> -->
:loveCountStatus="Boolean(displayDetail.loveCountStatus)" <AudioPlayer
:collectCount="displayDetail.collectCount" style="display: none"
:collectCountStatus=" :url="$getFullUrl(displayDetail.audiosVo[0].url)"
Boolean(displayDetail.collectCountStatus) ref="AudioPlayer"
" />
:sourceId="displayDetail.exhibitionId"
:title="displayDetail.title"
:sourceType="'biz_exhibition'"
:iconSize="24"
@reload="reload"
/>
</div>
</el-col>
</el-row>
</div> </div>
</div> </div>
<div <!-- 展览简介 -->
class="audio wow animate__animated animate__fadeInRight" <div class="content-item display-detail_intro">
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }" <div class="intro-content wow animate__animated animate__fadeInLeft">
@click="handleClickAudio" <div class="intro-title">
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0" <svg-icon icon-class="jianjie"></svg-icon>
> <span>展览简介</span>
<img src="@/assets/imgs/display/normal/music.png" alt="" /> </div>
<!-- <svg-icon icon-class="music"></svg-icon> --> <div class="intro-content-container">
<AudioPlayer {{ displayDetail.intro }}
style="display: none" </div>
: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> </div>
<div class="intro-content-container"> <div
{{ displayDetail.intro }} 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> </div>
<!--展览单元 -->
<div <div
class="intro-video wow animate__animated animate__fadeInRight" class="content-item display-detail_units"
v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0" ref="units"
v-if="displayDetail.exhibitionUnits.length > 0"
> >
<el-carousel :interval="4000" type="card" indicator-position="none"> <div class="custom_title wow animate__animated animate__fadeInUp">
<el-carousel-item <div class="desc">
v-for="item in displayDetail.videosVo" <div class="divider"></div>
:key="item.fileId" <img
> src="@/assets/imgs/display/normal/title-desc.png"
<Video :url="$getFullUrl(item.url)" theme="blue" /> class="modify"
</el-carousel-item> alt=""
</el-carousel> />
</div> </div>
</div> <div class="center">
<!--展览单元 --> <svg-icon icon-class="unit"></svg-icon>
<div <span class="title">展览单元</span>
class="content-item display-detail_units" </div>
ref="units" <div class="desc">
v-if="displayDetail.exhibitionUnits.length > 0" <img
> src="@/assets/imgs/display/normal/title-desc.png"
<div class="custom_title wow animate__animated animate__fadeInUp"> class="modify"
<div class="desc"> alt=""
<div class="divider"></div> />
<img <div class="divider"></div>
src="@/assets/imgs/display/normal/title-desc.png" </div>
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> </div>
<div class="unit-content wow animate__animated animate__fadeInRight"> <div class="unit-container">
<div <div
class="text-indent unit-content_intro" class="
v-if="curUnit.intro" unit-content-menu
v-html="curUnit.intro" 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>
<div <div
class="unit-content_images" class="unit-content wow animate__animated animate__fadeInRight"
v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
> >
<el-carousel <div
indicator-position="outside" class="text-indent unit-content_intro"
:autoplay="false" v-if="curUnit.intro"
height="600px" v-html="curUnit.intro"
:loop="false"
> >
<el-carousel-item <!-- {{ curUnit.intro }} -->
v-for="item in curUnit.imagesVo" </div>
:key="item.euId" <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-carousel-item
<el-image v-for="item in curUnit.imagesVo"
:src="$getFullUrl(item.pressUrl)" :key="item.euId"
fit="contain" >
class="images_img" <div class="unit-content_images_container">
></el-image> <el-image
<div :src="$getFullUrl(item.pressUrl)"
class="enlarge" fit="contain"
@click="handelPreviewImages(curUnit.imagesVo)" class="images_img"
> ></el-image>
<img src="@/assets/imgs/enlarge-s.png" alt="" /> <div
</div> class="enlarge"
<div class="desc"> @click="handelPreviewImages(curUnit.imagesVo)"
{{ item.name.split(".")[0] }} >
<img src="@/assets/imgs/enlarge-s.png" alt="" />
</div>
<div class="desc">
{{ item.name.split(".")[0] }}
</div>
</div> </div>
</div> </el-carousel-item>
</el-carousel-item> </el-carousel>
</el-carousel>
<!-- <el-col <!-- <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"
...@@ -288,121 +279,125 @@ ...@@ -288,121 +279,125 @@
{{ item.name }} {{ item.name }}
</div> </div>
</el-col> --> </el-col> -->
</div> </div>
<div <div
class="unit-content_videos" class="unit-content_videos"
v-if="curUnit.videosVo && curUnit.videosVo.length > 0" v-if="curUnit.videosVo && curUnit.videosVo.length > 0"
> >
<el-row :gutter="20"> <el-row :gutter="20">
<el-col <el-col
:span="24 / curUnit.videosVo.length" :span="24 / curUnit.videosVo.length"
v-for="item in curUnit.videosVo" v-for="item in curUnit.videosVo"
:key="item.euId" :key="item.euId"
> >
<Video :url="$getFullUrl(item.url)" /> <Video :url="$getFullUrl(item.url)" />
</el-col> </el-col>
</el-row> </el-row>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<!--展览相关文物 --> <!--展览相关文物 -->
<div <div
class="content-item display-detail_relateRc" class="content-item display-detail_relateRc"
ref="units" ref="units"
v-if=" v-if="
displayDetail.culturalRelicVo && displayDetail.culturalRelicVo &&
displayDetail.culturalRelicVo.length > 0 displayDetail.culturalRelicVo.length > 0
" "
> >
<el-row :gutter="26"> <el-row :gutter="26">
<el-col <el-col
:span="index == 0 ? 12 : 4" :span="index == 0 ? 12 : 4"
v-for="(item, index) in displayDetail.culturalRelicVo" v-for="(item, index) in displayDetail.culturalRelicVo"
:key="index" :key="index"
>
<div
class="img-container wow animate__animated animate__fadeInUp"
@click="handleToCr(item)"
> >
<img :src="item.faceImagePressUrl || item.faceImageUrl" alt="" /> <div
<div class="cr-name-intro" v-if="index == 0"> class="img-container wow animate__animated animate__fadeInUp"
<div class="cr-name">{{ item.name }}</div> @click="handleToCr(item)"
<div class="cr-intro">{{ item.intro }}</div> >
<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> </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> </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>
<div class="desc"> <div class="lts-content wow animate__animated animate__fadeInUp">
<img <el-table
src="@/assets/imgs/display/normal/title-desc.png" :data="displayDetail.literatureVo"
class="modify" :header-cell-style="{
alt="" background: '#eeeeee',
/> color: '#333',
<div class="divider"></div> }"
: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> </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>
</div> </div>
<el-image-viewer <el-image-viewer
...@@ -523,7 +518,7 @@ export default { ...@@ -523,7 +518,7 @@ export default {
this.displayDetail.audiosVo && this.displayDetail.audiosVo &&
this.displayDetail.audiosVo.length > 0 this.displayDetail.audiosVo.length > 0
) { ) {
// this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭"); this.$message.info("正在播放当前文物讲解音频，点击旋转按钮可关闭");
this.$refs.AudioPlayer.play(); this.$refs.AudioPlayer.play();
} }
}); });
...@@ -721,309 +716,315 @@ export default { ...@@ -721,309 +716,315 @@ export default {
} }
} }
.wrapper { .wrapper {
width: 1200px; // width: 1200px;
box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16); padding: 0 13%;
width: 100%;
display: flex; display: flex;
flex-direction: column;
align-items: center;
justify-content: center; justify-content: center;
min-height: 200px; .inner {
position: relative; box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
margin: 36px 0 70px; display: flex;
/**基本信息 */ flex-direction: column;
.display-detail_basic_info { align-items: center;
justify-content: center;
min-height: 200px;
position: relative; position: relative;
.info-container { margin: 36px 0 70px;
display: flex; /**基本信息 */
justify-content: space-between; .display-detail_basic_info {
padding: 60px 36px; position: relative;
height: 100%; .info-container {
background-color: #fff; display: flex;
.info-container-left { justify-content: space-between;
min-height: 200px; padding: 60px 36px;
margin-right: 50px; height: 100%;
flex: 1; background-color: #fff;
overflow: hidden; .info-container-left {
.imagesVo-image-container { min-height: 200px;
// position: relative; margin-right: 50px;
.img-container { flex: 1;
height: 280px; overflow: hidden;
width: 100%; .imagesVo-image-container {
img { // position: relative;
.img-container {
height: 280px;
width: 100%; width: 100%;
height: 100%; img {
object-fit: cover; width: 100%;
height: 100%;
object-fit: cover;
}
} }
} }
} }
} .info-container-right {
.info-container-right { flex: 1;
flex: 1; min-height: 200px;
min-height: 200px;
.info-title { .info-title {
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
color: #444; color: #444;
padding-bottom: 20px; padding-bottom: 20px;
margin-bottom: 20px; margin-bottom: 20px;
border-bottom: 2px solid #f2f2f2; border-bottom: 2px solid #f2f2f2;
.view-count { .view-count {
font-size: 18px; font-size: 18px;
margin-top: 10px; margin-top: 10px;
color: #999; color: #999;
font-weight: normal; font-weight: normal;
.svg-icon { .svg-icon {
margin-right: 10px; margin-right: 10px;
}
} }
} }
} .basic-info {
.basic-info { .body-item {
.body-item {
display: flex;
.label {
display: flex; display: flex;
align-items: center; .label {
width: 120px; display: flex;
margin-right: 26px; align-items: center;
margin-bottom: 10px; width: 140px;
font-weight: bold; margin-right: 26px;
color: #858585; margin-bottom: 10px;
.svg-icon { font-weight: bold;
width: 24px; color: #858585;
height: 24px; .svg-icon {
margin-right: 16px; width: 24px;
height: 24px;
margin-right: 16px;
}
} }
} }
} }
}
.right { .right {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.qrcode {
margin-bottom: 28px;
display: flex; display: flex;
flex-direction: column;
align-items: center;
justify-content: center; justify-content: center;
img { .qrcode {
width: 50%; margin-bottom: 28px;
height: 100%;
}
}
.tools {
width: 100%;
.tools-item {
color: #858585;
flex: 1;
display: flex; display: flex;
align-items: center; justify-content: center;
cursor: pointer; img {
.svg-icon { width: 50%;
width: 22px; height: 100%;
height: 22px;
margin-right: 8px;
}
.like {
color: #831122;
} }
.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 {
.audio { position: absolute;
position: absolute; right: -120px;
right: -100px; top: 34px;
top: 34px; cursor: pointer;
cursor: pointer; animation: audioRotate 8s linear infinite;
animation: audioRotate 8s linear infinite; transform-origin: center center;
transform-origin: center center; border: 2px solid #2069c4;
border: 2px solid #2069c4; padding: 10px;
padding: 10px; border-radius: 50%;
border-radius: 50%; display: flex;
display: flex; justify-content: center;
justify-content: center; align-items: center;
align-items: center; background-color: #fff;
background-color: #fff; transition: all 0.5s ease;
transition: all 0.5s ease; &:hover {
&:hover { box-shadow: 0 0 14px rgb(0 0 0 / 40%);
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;
.svg-icon { .svg-icon {
margin-right: 10px; color: #2069c4;
font-size: 36px; font-size: 80px;
}
img {
width: 60px;
height: 60px;
} }
}
.intro-content-container {
text-indent: 34px;
} }
} }
}
/**展览单元 */ /**简介和视频 */
.display-detail_units { .display-detail_intro {
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-image: url("@/assets/imgs/display/normal/bg.png");
background-size: 1%; background-size: 1%;
display: flex;
.unit-content_intro { .intro-content,
font-size: 16px; .intro-video {
font-weight: 400; flex: 1;
color: #444444;
line-height: 36px;
text-indent: 32px;
margin-bottom: 20px;
} }
.unit-content_images { .intro-content {
position: relative; padding: 20px;
.unit-content_images_container { margin: 20px;
height: 100%; line-height: 28px;
display: flex; .intro-title {
flex-direction: column; font-size: 26px;
.images_img { font-weight: 400;
flex: 1; 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; display: flex;
justify-content: center; flex-direction: column;
height: 40px; .images_img {
align-items: center; flex: 1;
}
.desc {
display: flex;
justify-content: center;
height: 40px;
align-items: center;
}
} }
} }
} }
} }
} // 关联文物
// 关联文物 .display-detail_relateRc {
.display-detail_relateRc { height: 560px;
height: 560px; background-image: url("@/assets/imgs/display/normal/bg.png");
background-image: url("@/assets/imgs/display/normal/bg.png"); background-size: 1%;
background-size: 1%; padding: 50px 0;
padding: 50px 0; .el-col {
.el-col { &:first-child {
&:first-child { .img-container {
.img-container {
width: 100%;
height: 460px;
position: relative;
.cr-name-intro {
width: 100%; width: 100%;
height: 100%; height: 460px;
position: absolute; position: relative;
left: 0;
top: 0;
padding: 100px 28px 50px;
background-image: linear-gradient( .cr-name-intro {
to top, width: 100%;
rgba(0, 0, 0, 0.8), height: 100%;
rgba(0, 0, 0, 0.1) position: absolute;
); left: 0;
.cr-name { top: 0;
font-size: 48px; padding: 100px 28px 50px;
font-weight: bold;
color: #ffffff; background-image: linear-gradient(
text-align: center; to top,
margin-bottom: 40px; 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 { img {
font-size: 16px; width: 100%;
font-weight: 400; height: 100%;
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%; &:not(&:first-child) {
height: 100%; margin-bottom: 30px;
.img-container {
height: 214px;
} }
} }
} }
&:not(&:first-child) { .img-container {
margin-bottom: 30px; width: 100%;
.img-container { height: 100%;
height: 214px; 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 { 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 { .display-detail_lts {
background-color: #fafafa; background-color: #fafafa;
.lts-content { .lts-content {
flex: 1; flex: 1;
}
} }
} }
} }
......
src/views/display/components/ChStyle-unit.vue
浏览文件 @ 8e562ed8
...@@ -163,6 +163,7 @@ export default { ...@@ -163,6 +163,7 @@ export default {
} }
.unit-node { .unit-node {
width: 1200px; width: 1200px;
// width: calc(100vw - 26%);
height: 550px; height: 550px;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
...@@ -196,7 +197,7 @@ export default { ...@@ -196,7 +197,7 @@ export default {
position: absolute; position: absolute;
top: 200px; top: 200px;
height: 70%; height: 70%;
padding: 0 20px; padding: 0 80px;
} }
} }
} }
......
src/views/display/components/ChStyle.vue
浏览文件 @ 8e562ed8
...@@ -463,7 +463,8 @@ export default { ...@@ -463,7 +463,8 @@ export default {
// 中国风主题样式 // 中国风主题样式
/**公共样式开始 */ /**公共样式开始 */
.wrapper { .wrapper {
width: 1200px; // width: 1200px;
width: calc(100% - 26%); //左右两边各自留13%
} }
.custom-title { .custom-title {
display: flex; display: flex;
...@@ -546,6 +547,7 @@ export default { ...@@ -546,6 +547,7 @@ export default {
filter: drop-shadow(2px 4px 6px #f8f8f8); filter: drop-shadow(2px 4px 6px #f8f8f8);
img { img {
transform: translateX(-10px); transform: translateX(-10px);
width: 1230px;
} }
} }
.left-layer, .left-layer,
...@@ -609,7 +611,7 @@ export default { ...@@ -609,7 +611,7 @@ export default {
} }
} }
.tools { .tools {
width: 230px; width: 280px;
} }
} }
...@@ -661,7 +663,7 @@ export default { ...@@ -661,7 +663,7 @@ export default {
.audio { .audio {
position: absolute; position: absolute;
right: -100px; right: -120px;
top: 34px; top: 34px;
cursor: pointer; cursor: pointer;
animation: audioRotate 8s linear infinite; animation: audioRotate 8s linear infinite;
......
src/views/display/index.vue
浏览文件 @ 8e562ed8
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<el-input <el-input
class="input item" class="input item"
v-model="keyword" v-model="keyword"
placeholder="关键词" placeholder="请输入关键词"
@keyup.enter.native="search" @keyup.enter.native="search"
clearable clearable
> >
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<el-select <el-select
class="type item" class="type item"
v-model="type" v-model="type"
placeholder="所属类别" placeholder="请选择所属类别"
filterable filterable
@change="handleTypeChange" @change="handleTypeChange"
clearable clearable
...@@ -124,7 +124,7 @@ ...@@ -124,7 +124,7 @@
<span>{{ item.deptName }}</span> <span>{{ item.deptName }}</span>
</div> </div>
</div> </div>
<div class="right"> <!-- <div class="right">
<span class="collect"> <span class="collect">
<svg-icon icon-class="collect"></svg-icon> <svg-icon icon-class="collect"></svg-icon>
<span>{{ <span>{{
...@@ -135,7 +135,7 @@ ...@@ -135,7 +135,7 @@
<svg-icon icon-class="view"></svg-icon> <svg-icon icon-class="view"></svg-icon>
<span>{{ item.browseCount }}</span> <span>{{ item.browseCount }}</span>
</span> </span>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -320,6 +320,10 @@ $text-indent: 16px; ...@@ -320,6 +320,10 @@ $text-indent: 16px;
padding: 90px 70px 80px; padding: 90px 70px 80px;
.item { .item {
margin-right: 20px; margin-right: 20px;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
} }
.input-icon { .input-icon {
height: 100%; height: 100%;
...@@ -342,6 +346,10 @@ $text-indent: 16px; ...@@ -342,6 +346,10 @@ $text-indent: 16px;
font-size: 14px; font-size: 14px;
width: 156px; width: 156px;
height: 40px; height: 40px;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
// height: 100%; // height: 100%;
.svg-icon { .svg-icon {
margin-right: 4px; margin-right: 4px;
......
src/views/home/components/Virtural.vue
浏览文件 @ 8e562ed8
...@@ -109,7 +109,7 @@ $blue: #2069c4; ...@@ -109,7 +109,7 @@ $blue: #2069c4;
.intro { .intro {
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba PuHuiTi";
color: #ffffff; color: #ffffff;
margin-top: 74px; margin-top: 110px;
.name { .name {
margin-bottom: 27px; margin-bottom: 27px;
font-size: 20px; 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 @@ ...@@ -9,7 +9,7 @@
class="input item" class="input item"
suffix-icon="el-icon-search" suffix-icon="el-icon-search"
v-model="keyword" v-model="keyword"
placeholder="关键词" placeholder="请输入关键词"
@keyup.enter.native="search" @keyup.enter.native="search"
clearable clearable
> >
......
src/views/virtual/index.vue
浏览文件 @ 8e562ed8
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<el-input <el-input
class="input item" class="input item"
v-model="keyword" v-model="keyword"
placeholder="关键词" placeholder="请输入关键词"
@keyup.enter.native="search" @keyup.enter.native="search"
clearable clearable
> >
...@@ -286,6 +286,10 @@ $text-indent: 16px; ...@@ -286,6 +286,10 @@ $text-indent: 16px;
margin-bottom: 63px; margin-bottom: 63px;
.item { .item {
margin-right: 20px; margin-right: 20px;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
} }
.input-icon { .input-icon {
height: 100%; height: 100%;
...@@ -307,6 +311,10 @@ $text-indent: 16px; ...@@ -307,6 +311,10 @@ $text-indent: 16px;
background-size: 100% 100%; background-size: 100% 100%;
color: #444; color: #444;
font-size: 14px; font-size: 14px;
&:hover{
-webkit-box-reflect: below 2px
linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}
.svg-icon { .svg-icon {
margin-right: 4px; margin-right: 4px;
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论