|
|
@@ -1,22 +1,27 @@
|
|
|
<template>
|
|
|
<gracePage :customHeader="false">
|
|
|
<view class="container" slot="gBody">
|
|
|
- <swiper class="swiper" @change="change" :circular="swiper.circular">
|
|
|
- <swiper-item v-for="(v, k) in fetch.items" :key="k">
|
|
|
+ <swiper class="cover" @change="change" :circular="swiper.circular">
|
|
|
+ <swiper-item v-for="(v, k) in fetch.info.pic_bg" :key="k">
|
|
|
<view class="default">
|
|
|
- <image :src="v.pic" mode="widthFix"></image>
|
|
|
+ <image :src="v" mode="widthFix" style="height:auto;"></image>
|
|
|
</view>
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
|
|
|
- <view class="btn">
|
|
|
+ <view class="btn-ctrls">
|
|
|
+
|
|
|
+ <view class="btn-wrapper space-between" v-if="fetch.button" :style="fetch.button.style">
|
|
|
+ <view class="button primary big" :style="fetch.button.color" v-if="fetch.button.name && fetch.button.name[0]" @click="goView">{{fetch.button.name[0]}}</view>
|
|
|
+ <block v-if="fetch.button.name && fetch.button.name[1]">
|
|
|
+ <text class="spliter"></text>
|
|
|
+ <view class="button primary" :style="fetch.button.color">{{fetch.button.name[1]}}</view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
<view class='dots'>
|
|
|
<text :class="swiper.index == k ? 'cur' : ''" v-for="(v, k) in fetch.items" :key="k"></text>
|
|
|
</view>
|
|
|
|
|
|
- <view class="grace-flex-center">
|
|
|
- <button @click="view" type="default" class="grace-button button" :style="fetch.button.read.style">{{fetch.button.read.name}}</button>
|
|
|
- </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</gracePage>
|
|
|
@@ -25,40 +30,41 @@
|
|
|
export default{
|
|
|
data() {
|
|
|
return {
|
|
|
+ id : 0,
|
|
|
swiper : {
|
|
|
index : 0,
|
|
|
circular : true,
|
|
|
},
|
|
|
fetch: {
|
|
|
- items : [
|
|
|
- {
|
|
|
- pic : 'https://7.jstyle.cn/1/2020/04/25/a69fdba6a0cba49d46cc07b8e269b546.jpg',
|
|
|
- url : '',
|
|
|
- title:"测试标题 001",
|
|
|
- opentype : 'navigate'
|
|
|
- },
|
|
|
- {
|
|
|
- pic : 'https://7.jstyle.cn/1/2020/04/25/224697c330eca688097b4d0e4189709e.jpg',
|
|
|
- url : '',
|
|
|
- title:"测试标题 02",
|
|
|
- opentype : 'navigate'
|
|
|
- },
|
|
|
- ],
|
|
|
- button : {
|
|
|
- read : {
|
|
|
- name : '阅读',
|
|
|
- style : 'background: linear-gradient(to right, #FF0066,#CA00FF) !important;color:#ffffff'
|
|
|
- }
|
|
|
- }
|
|
|
+ is_buy : false,
|
|
|
+ info : {},
|
|
|
+ button : {}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ onLoad(option) {
|
|
|
+ this.id = option.id;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ // 重新加载
|
|
|
+ onPullDownRefresh: function() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
methods:{
|
|
|
change : function(e) {
|
|
|
this.swiper.index = e.detail.current;
|
|
|
},
|
|
|
- view : function() {
|
|
|
- this.Dever.location('dream/view?id=1');
|
|
|
+ getData : function() {
|
|
|
+ var self = this;
|
|
|
+ this.Dever.get(this, 'app/collection/?l=api.getInfo', {id:this.id});
|
|
|
+ },
|
|
|
+ goView : function() {
|
|
|
+ //是否购买
|
|
|
+ if (!this.fetch.is_buy) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.Dever.location('dream/view?id=1&page_id=2&index=0');
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
@@ -70,11 +76,53 @@ export default{
|
|
|
width: 100%;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.btn-wrapper {
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.button {
|
|
|
+ height: 80rpx;
|
|
|
+ border: 1rpx solid #cc1619;
|
|
|
+ color: #cc1619;
|
|
|
+ font-size: 30rpx;
|
|
|
+ min-width: 300rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.button>button{
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.button.big {
|
|
|
+ width: 630rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.button.primary {
|
|
|
+ background-color: #cc1619;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.button.blk {
|
|
|
+ background-color: #000;
|
|
|
+ color: #fff;
|
|
|
+ border-color: #000;
|
|
|
}
|
|
|
-.swiper {
|
|
|
- width: 750rpx;
|
|
|
- height: 100%;
|
|
|
+.cover {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
+
|
|
|
swiper-item>view{
|
|
|
height: 100%;
|
|
|
}
|
|
|
@@ -82,18 +130,49 @@ swiper-item image{
|
|
|
width: 750rpx;
|
|
|
height: 100%;
|
|
|
}
|
|
|
-.btn {
|
|
|
+
|
|
|
+.btn-ctrls {
|
|
|
position: absolute;
|
|
|
- bottom: 20rpx;
|
|
|
- left: 60rpx;
|
|
|
- right: 60rpx;
|
|
|
+ bottom: 40rpx;
|
|
|
+ left: 200rpx;
|
|
|
+ right: 200rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-ctrls .btn-wrapper {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ width: 350rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ background-color: #000;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-ctrls .btn-wrapper .button{
|
|
|
+ border-radius: 0;
|
|
|
+ min-width: 100rpx;
|
|
|
+ background-color: transparent;
|
|
|
+ border: 0;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.btn-ctrls .btn-wrapper .spliter{
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 1rpx;
|
|
|
+ background: #fff;
|
|
|
+ height: 40rpx;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
-.btn .dots{
|
|
|
+.btn-ctrls .btn-wrapper .button.small{
|
|
|
+ min-width: 150rpx;
|
|
|
+}
|
|
|
+.btn-ctrls .btn-wrapper .button.big{
|
|
|
+ width: 420rpx;
|
|
|
+}
|
|
|
+.btn-ctrls .dots{
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- margin-bottom: -88rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
}
|
|
|
-.btn .dots text{
|
|
|
+.btn-ctrls .dots text{
|
|
|
display: block;
|
|
|
width: 16rpx;
|
|
|
height: 8rpx;
|
|
|
@@ -101,17 +180,141 @@ swiper-item image{
|
|
|
border-radius: 8rpx;
|
|
|
margin: 0 5rpx;
|
|
|
}
|
|
|
-.btn .dots text.cur{
|
|
|
+.btn-ctrls .dots text.cur{
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
- /*background: red;*/
|
|
|
+}
|
|
|
+.btn-ctrls .scorelist{
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.btn-ctrls .scorelist navigator{
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-decoration: underline;
|
|
|
}
|
|
|
|
|
|
-.button{
|
|
|
- margin-top: 8rpx;
|
|
|
- height:60rpx;
|
|
|
- width:200rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 28px;
|
|
|
- border-radius: 0;
|
|
|
+.space-between{
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.btn-wrapper{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.ios-pay{
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.pulloff{
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 20;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.pulloff>view{
|
|
|
+ background-color: rgba(0, 0, 0, 0.65);
|
|
|
+ padding: 53rpx 53rpx 53rpx 74rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.pulloff>view text{
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30rpx;
|
|
|
+ line-height: 53rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.preselltip .layer{
|
|
|
+ border-radius: 5rpx;
|
|
|
+ padding:70rpx 40rpx;
|
|
|
+}
|
|
|
+.preselltip .layer .tit{
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin: 16rpx 0 80rpx;
|
|
|
+}
|
|
|
+.preselltip .layer .btn-wrapper{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+.preselltip .layer .btn-wrapper .button{
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 0 0 5rpx 5rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.recharge-layer{
|
|
|
+ padding: 50rpx 55rpx 62rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ transform: translateY(100%);
|
|
|
+ transition-property: transform;
|
|
|
+ transition-duration: 0.3s;
|
|
|
+ transition-timing-function: ease-in;
|
|
|
+}
|
|
|
+.recharge-layer.slidein{
|
|
|
+ transform: translateY(0);
|
|
|
+}
|
|
|
+.recharge-layer .tit{
|
|
|
+ font-weight: bolder;
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin: 0 0 40rpx;
|
|
|
+}
|
|
|
+.recharge-layer .msg{
|
|
|
+ font-size: 22rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ width: 640rpx;
|
|
|
+ margin: 0 auto 47rpx;
|
|
|
+}
|
|
|
+.recharge-layer input{
|
|
|
+ width: 640rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ border: 1rpx solid #EEEEEE;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 25rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+.recharge-layer .errtip {
|
|
|
+ color: #d1171a;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin: 21rpx 0 0;
|
|
|
+ height: 34rpx;
|
|
|
+}
|
|
|
+.recharge-layer .btn-wrapper{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-top: 20rpx;
|
|
|
+}
|
|
|
+.recharge-layer .btn-wrapper .button{
|
|
|
+ border: 0;
|
|
|
+ min-width: 0;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #999999;
|
|
|
+ width: 284rpx;
|
|
|
+}
|
|
|
+.recharge-layer .btn-wrapper .button.primary{
|
|
|
+ border:0;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.recharge-layer .btn-wrapper .button.cancel{
|
|
|
+ border:0;
|
|
|
+ background-color: #CCCCCC;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.recharge-mask{
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ display: none;
|
|
|
}
|
|
|
</style>
|
dever