Browse Source

首页弹窗

h5_css
yanyan 3 years ago
parent
commit
f210155c08
  1. 55
      pages/index/index.vue

55
pages/index/index.vue

@ -17,8 +17,16 @@
<view class="itembox"> <view class="itembox">
<span v-for="(item,i) in sceneList" :key="i" @click="navClickHandler(item)"><img :src="item.uploadPath" class="scene-img"></image></span> <span v-for="(item,i) in sceneList" :key="i" @click="navClickHandler(item)"><img :src="item.uploadPath" class="scene-img"></image></span>
</view> </view>
<view class="middleContent" v-if="showTitle"> <!-- <view class="middleContent" v-if="showTitle">
<view v-html="content"></view> <view v-html="content"></view>
</view> -->
<view class="popup-layer-back" v-if="showTitle">
<view class="notice">
<image src="../../static/images/bg-notice.jpeg"></image>
<view class="notice-text"><view v-html="content"></view>
<!-- <span class="keytxt">敬请期待</span> -->
</view>
</view>
</view> </view>
</view> </view>
<view class="footbox"> <view class="footbox">
@ -249,6 +257,51 @@
border-radius: 10px; border-radius: 10px;
// opacity: 0.9; // opacity: 0.9;
} }
.popup-layer-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.notice {
position: absolute;
top: 40%;
left: 50%;
z-index: 9999;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 560rpx;
height: 620rpx;
background-color: #fff;
border-radius: 20rpx;
image {
width: 100%;
/* height: 100%; */
border-radius: 20rpx;
}
.notice-text {
position: absolute;
z-index: 1;
bottom: 20%;
left: 7%;
width: 88%;
color: #666;
font-size: 30rpx;
line-height: 1.75;
// .keytxt {
// display: block;
// font-size: 38rpx;
// line-height: 3;
// letter-spacing: 2rpx;
// text-align: center;
// color: #13c79e;
// }
}
}
// .index-background { // .index-background {
// image { // image {
// height: 270rpx; // height: 270rpx;

Loading…
Cancel
Save