|
|
@@ -1,58 +1,293 @@
|
|
|
<template>
|
|
|
<gracePage :customHeader="false">
|
|
|
- <view slot="gBody" class="grace-body">
|
|
|
- <view class="grace-title grace-margin-top">
|
|
|
- <view class="grace-title-border"></view>
|
|
|
- <text class="grace-title-text grace-blue">幻境</text>
|
|
|
- <text class="grace-text-small grace-gray">shemic.com</text>
|
|
|
- </view>
|
|
|
- <view style="padding-bottom:50rpx;">
|
|
|
- <graceSwiper :swiperItems="swiperItems2" :width="700" :height="1300" @taped="location"></graceSwiper>
|
|
|
+ <view slot="gBody" class="grace-body">
|
|
|
+ <view class='journal-list'>
|
|
|
+ <view class='list'>
|
|
|
+ <view class='journal' v-for="(v, k) in fetch.info" :key="k">
|
|
|
+ <view data-journal="list" @click="location(v.id_code)">
|
|
|
+ <image mode='aspectFill' class='default cover' :src="v.pic_cover"></image>
|
|
|
+ <view class='infos'>
|
|
|
+ <view class='tit'>{{v.name}}</view>
|
|
|
+ <view class='num'>
|
|
|
+ <text class='grace-icons icon-user'>100</text>
|
|
|
+ <text class='grace-icons icon-shoucang'>20</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</gracePage>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import gracePage from "../../lib/graceUI/components/gracePage.vue";
|
|
|
-import graceSwiper from "../../lib/graceUI/components/graceSwiper.vue";
|
|
|
export default{
|
|
|
data() {
|
|
|
return {
|
|
|
- swiperItems2 : [
|
|
|
- {
|
|
|
- id : 1,
|
|
|
- img : 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/3.png',
|
|
|
- url : '',
|
|
|
- title:"测试标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长",
|
|
|
- opentype : 'click'
|
|
|
- },
|
|
|
- {
|
|
|
- id : 1,
|
|
|
- img : 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/4.png',
|
|
|
- url : '',
|
|
|
- title:"测试标题04",
|
|
|
- opentype : 'click'
|
|
|
- },
|
|
|
- {
|
|
|
- id : 1,
|
|
|
- img : 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/5.png',
|
|
|
- url : '',
|
|
|
- title:"测试标题05",
|
|
|
- opentype : 'click'
|
|
|
- }
|
|
|
- ]
|
|
|
+ fetch : {
|
|
|
+ info : [],
|
|
|
+ }
|
|
|
}
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ // 重新加载
|
|
|
+ onPullDownRefresh: function() {
|
|
|
+ this.getData();
|
|
|
},
|
|
|
- methods:{
|
|
|
- location : function(e){
|
|
|
- var id = this.swiperItems2[e].id;
|
|
|
+ methods:{
|
|
|
+ getData : function() {
|
|
|
+ this.Dever.get(this, 'app/collection/?l=api.home', {id:-1});
|
|
|
+ },
|
|
|
+ location : function(id) {
|
|
|
this.Dever.location('dream/index?id=' + id);
|
|
|
}
|
|
|
},
|
|
|
- components: {
|
|
|
- gracePage, graceSwiper
|
|
|
- }
|
|
|
}
|
|
|
</script>
|
|
|
-<style>
|
|
|
+<style>
|
|
|
+.grace-icons {
|
|
|
+ margin-left:12rpx;
|
|
|
+}
|
|
|
+page {
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.push-journal {
|
|
|
+ position: relative;
|
|
|
+ width: 750rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 20rpx 0 43rpx;
|
|
|
+ overflow: visible;
|
|
|
+}
|
|
|
+.push-journal view{
|
|
|
+ overflow: visible;
|
|
|
+}
|
|
|
+
|
|
|
+.push-journal .icon-fee, .push-journal .icon-free, .push-journal .icon-vip {
|
|
|
+ top: 82rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.push-journal swiper {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 964rpx;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+.push-journal swiper image{
|
|
|
+ display: block;
|
|
|
+ margin: 18rpx auto 0;
|
|
|
+ width: 545rpx;
|
|
|
+ height: 768rpx;
|
|
|
+ transition-property: all;
|
|
|
+ transition-duration: 0.3s;
|
|
|
+}
|
|
|
+.push-journal .active image{
|
|
|
+ width: 570rpx;
|
|
|
+ height: 804rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.push-journal .push-infos{
|
|
|
+ box-shadow:0rpx 0 20rpx 0rpx rgba(187, 187, 187, 0.35);
|
|
|
+ width: 545rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 20rpx 0;
|
|
|
+}
|
|
|
+.push-journal .active .push-infos{
|
|
|
+ width: 570rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.push-journal .tit {
|
|
|
+ font-size: 30rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.push-journal .num {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #999;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.push-journal .num .ico-dingyue{
|
|
|
+ margin-right: 13rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.spriter {
|
|
|
+ height: 45rpx;
|
|
|
+ width: 750rpx;
|
|
|
+ background: #f2f2f2;
|
|
|
+}
|
|
|
+
|
|
|
+.journal-list {
|
|
|
+ width: 650rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.journal-list .list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.journal {
|
|
|
+ position: relative;
|
|
|
+ width: 300rpx;
|
|
|
+ padding: 50rpx 0 22rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.journal .cover {
|
|
|
+ width: 300rpx;
|
|
|
+ height: 420rpx;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.journal .infos{
|
|
|
+ box-shadow:0rpx 0 20rpx 0rpx rgba(187, 187, 187, 0.35);
|
|
|
+ width: 300rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.journal .tit {
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.journal .num {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-top: 15rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: -14rpx;
|
|
|
+}
|
|
|
+.journal .num .ico-dingyue{
|
|
|
+ margin-right: 9rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.journal-list .loading {
|
|
|
+ margin: 40rpx auto 0;
|
|
|
+}
|
|
|
+
|
|
|
+.myinfo {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 50rpx 0 50rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.uprofile {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.uprofile image {
|
|
|
+ width: 83rpx;
|
|
|
+ height: 83rpx;
|
|
|
+ display: block;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.myinfo .contact {
|
|
|
+ position: relative;
|
|
|
+ width: 150rpx;
|
|
|
+ height: 55rpx;
|
|
|
+ text-align: center;
|
|
|
+ border: 2rpx solid #000;
|
|
|
+ border-radius: 55rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 55rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.myinfo .contact button {
|
|
|
+ opacity: 0;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.help {
|
|
|
+ width: 590rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.wxParse-img {
|
|
|
+ width: 590rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.order-list{
|
|
|
+ width: 650rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+.order-list .list{
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+}
|
|
|
+.order-item {
|
|
|
+ position: relative;
|
|
|
+ border-bottom: solid 1rpx #ccc;
|
|
|
+ padding: 40rpx 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+.order-item .order-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.order-item .order-info view {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 24rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.order-item .order-info view:before {
|
|
|
+ content: '';
|
|
|
+ width: 4rpx;
|
|
|
+ background-color: #d1171a;
|
|
|
+ height: 22rpx;
|
|
|
+ margin-right: 18rpx
|
|
|
+}
|
|
|
+
|
|
|
+.order-item .order-info navigator {
|
|
|
+ color: #d1171a;
|
|
|
+ font-size: 28rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.order-item .mag-info {
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ margin: 27rpx 0 40rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 17rpx 0;
|
|
|
+}
|
|
|
+
|
|
|
+.order-item .mag-info text {
|
|
|
+ display: block;
|
|
|
+ padding: 15rpx 0 0 17rpx;
|
|
|
+}
|
|
|
+.order-item .mag-info view{
|
|
|
+ padding-left: 17rpx;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
dever