优化首页

pages/index/index.vue

@@ -1,270 +1,264 @@
 <template>
-  <view>
-    <!-- 标题栏和状态栏占位符 -->
-    <!-- <view class="titleNview-placing"> </view> -->
-    <sub-tabvs class="" :tabs="typetab" @change="changeIndex" :selectIndex="selecttype"
-      :scrollTop="scrollTop"></sub-tabvs>
-    <view class="home-header pd0_15 mt10" :style="'background: ' + mbgColor + ';'">
-      <view class="home-mendian flex alcenter space plr15 cl-w9" style="display: none;">
-        <navigator style="width: calc(100% - 80rpx);" url="/pages/client/tuan/ss">
-          <view class="flex alcenter" style="width: calc(100% - 80rpx);">
-            <text class="iconfont  iconsousuo ft14 mr10"></text>
-            <text class="text-over ft14" style="width: calc(100% - 60rpx);">请输入搜索内容</text>
-          </view>
-        </navigator>
-        <text @click="saoma()" class="iconfont iconicon_saoma ft24"></text>
-      </view>
+	<view>
+		<!-- 标题栏和状态栏占位符 -->
+		<!-- <view class="titleNview-placing"> </view> -->
+		<sub-tabvs class="" :tabs="typetab" @change="changeIndex" :selectIndex="selecttype"
+			:scrollTop="scrollTop"></sub-tabvs>
+		<view class="home-header pd0_15 mt10" :style="'background: ' + mbgColor + ';'">
+			<view class="home-mendian flex alcenter space plr15 cl-w9" style="display: none;">
+				<navigator style="width: calc(100% - 80rpx);" url="/pages/client/tuan/ss">
+					<view class="flex alcenter" style="width: calc(100% - 80rpx);">
+						<text class="iconfont  iconsousuo ft14 mr10"></text>
+						<text class="text-over ft14" style="width: calc(100% - 60rpx);">请输入搜索内容</text>
+					</view>
+				</navigator>
+				<text @click="saoma()" class="iconfont iconicon_saoma ft24"></text>
+			</view>
 
-      <view class="">
-        <home-banner :banners="banners"></home-banner>
-      </view>
-    </view>
-    <view class="integral-mall-main plr15" style="margin-top: 30upx;">
-      <view class="integal-mall-menu flex pt10 pb10">
-        <view class="col2 text-center" @click="linkTo" data-link="/pages/zhuiju/index" data-type='tabbar'>
-          <view>
-            <!-- <image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[0]"></image> -->
-            <image style="width: 100rpx; height: 100rpx;" src="/static/icon/index/zuiju.png"></image>
-          </view>
-          <view class="ft14 ftw600">追剧</view>
-        </view>
-        <view class="col2 text-center bd-left" @click="linkTo" data-link="/pages/index/billboard/index">
-          <view>
-            <!-- <image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[2]"></image> -->
-            <image style="width: 100rpx; height: 100rpx;" src="/static/icon/index/phb.png"></image>
-          </view>
-          <view class="ft14 ftw600">排行</view>
-        </view>
-        <view class="col2 text-center bd-left" @click="linkTo" data-link="/pages/index/new/index">
-          <view>
-            <!-- <image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[6]"></image> -->
-            <image style="width: 100rpx; height: 100rpx;" src="/static/icon/index/new.png"></image>
-          </view>
-          <view class="ft14 ftw600">最新</view>
-        </view>
-      </view>
-      <view class="mt24">
-        <view class="flex alcenter start">
-          <view class="flex alcenter">
-            <image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[0]"></image>
-            <text class="ft16 ftw600 cl-main ml15">{{ hotdata.subject_name }}</text>
-          </view>
-          <!-- <navigator url="/pages/client/tuan/ss?selectIndex=1"> -->
-          <!-- <view @click="huanyihuan()" class="ft14 cl-notice">换一换</view> -->
-          <!-- </navigator> -->
-        </view>
+			<view class="">
+				<home-banner :banners="banners"></home-banner>
+			</view>
+		</view>
+		<view class="integral-mall-main plr15" style="margin-top: 30upx;">
+			<view class="integal-mall-menu flex pt10 pb10">
+				<view class="col2 text-center" @click="linkTo" data-link="/pages/zhuiju/index" data-type='tabbar'>
+					<view>
+						<!-- <image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[0]"></image> -->
+						<image style="width: 100rpx; height: 100rpx;" src="/static/icon/index/zuiju.png"></image>
+					</view>
+					<view class="ft14 ftw600">追剧</view>
+				</view>
+				<view class="col2 text-center bd-left" @click="linkTo" data-link="/pages/index/billboard/index">
+					<view>
+						<!-- <image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[2]"></image> -->
+						<image style="width: 100rpx; height: 100rpx;" src="/static/icon/index/phb.png"></image>
+					</view>
+					<view class="ft14 ftw600">排行</view>
+				</view>
+				<view class="col2 text-center bd-left" @click="linkTo" data-link="/pages/index/new/index">
+					<view>
+						<!-- <image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[6]"></image> -->
+						<image style="width: 100rpx; height: 100rpx;" src="/static/icon/index/new.png"></image>
+					</view>
+					<view class="ft14 ftw600">最新</view>
+				</view>
+			</view>
+			<view class="mt24">
+				<view class="flex alcenter start">
+					<view class="flex alcenter">
+						<image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[0]"></image>
+						<text class="ft16 ftw600 cl-main ml15">{{ hotdata.subject_name }}</text>
+					</view>
+					<!-- <navigator url="/pages/client/tuan/ss?selectIndex=1"> -->
+					<!-- <view @click="huanyihuan()" class="ft14 cl-notice">换一换</view> -->
+					<!-- </navigator> -->
+				</view>
 
-        <view class="mt16 card-wrapper" style="min-height: 100px;">
-          <block v-for="(value, key) in hotdata.data" :key="key">
-            <view class="box card" style="width:31%; position: relative; border-radius:20rpx;" @click="detail(value)">
-              <!-- <view class="btn-mini" style="position: absolute; top: 20upx; right: 20upx; border-radius: 10upx;font-size: 18upx;width: 60upx; height: 36upx; z-index: 1;" :style="getBtnStyle">{{value.lxname}}</view> -->
-              <image class="integral-mall-goods" mode="aspectFill" :src="value.cover_image"></image>
-              <view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{ value.name }}</view>
-            </view>
-          </block>
-        </view>
-      </view>
-      <view class="mt24">
-        <view class="flex alcenter start">
-          <view class="flex alcenter">
-            <image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[0]"></image>
-            <text class="ft16 ftw600 cl-main ml15">{{ givedata.subject_name }}</text>
-          </view>
-          <!-- <navigator url="/pages/client/tuan/ss?selectIndex=1"> -->
-          <!-- <view @click="huanyihuan()" class="ft14 cl-notice">换一换</view> -->
-          <!-- </navigator> -->
-        </view>
-        <view class="mt16 card-wrapper" style="min-height: 100px;">
-          <block v-for="(value, key) in givedata.data" :key="key">
-            <view class="box card" style="width:31%; position: relative; border-radius:20rpx;" @click="detail(value)">
-              <image class="integral-mall-goods" mode="aspectFill" :src="value.cover_image"></image>
-              <view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{ value.name }}</view>
-            </view>
-          </block>
-        </view>
-      </view>
-    </view>
-  </view>
-  <!-- <home-default :datasa="datasa"></home-default> -->
-</view></view></template>
+				<view class="flex space"
+					style="display:flex; flex-wrap:wrap; padding: 30upx 30upx 0px 30upx;min-height: 100px;">
+					<block v-for="(value, key) in hotdata.data" :key="key">
+						<view class="box pb10 mb15" style="width:31%; border-radius:20rpx;" @click="detail(value)">
+							<!-- <view class="btn-mini" style="position: absolute; top: 20upx; right: 20upx; border-radius: 10upx;font-size: 18upx;width: 60upx; height: 36upx; z-index: 1;" :style="getBtnStyle">{{value.lxname}}</view> -->
+							<image class="integral-mall-goods" mode="aspectFill" :src="value.cover_image"></image>
+							<view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{ value.name }}</view>
+						</view>
+					</block>
+				</view>
+			</view>
+			<view class="mt24">
+				<view class="flex alcenter start">
+					<view class="flex alcenter">
+						<image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[0]"></image>
+						<text class="ft16 ftw600 cl-main ml15">{{ givedata.subject_name }}</text>
+					</view>
+					<!-- <navigator url="/pages/client/tuan/ss?selectIndex=1"> -->
+					<!-- <view @click="huanyihuan()" class="ft14 cl-notice">换一换</view> -->
+					<!-- </navigator> -->
+				</view>
+				<view class="flex space"
+					style="display:flex; flex-wrap:wrap; padding: 30upx 30upx 0px 30upx;min-height: 100px;">
+					<block v-for="(value, key) in givedata.data" :key="key">
+						<view class="box pb10 mb15" style="width:31%; border-radius:20rpx;" @click="detail(value)">
+							<image class="integral-mall-goods" mode="aspectFill" :src="value.cover_image"></image>
+							<view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{ value.name }}</view>
+						</view>
+					</block>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
 <script>
-import {
-  getMiniprogramHall
-} from '@/common/apis/index.js'
-import { getConfigInfo } from "@/common/apis/common.js";
-import cellGroup from '../../uni_modules/uview-ui/libs/config/props/cellGroup';
-export default {
-  data() {
-    return {
-      navLock: false,
-      banners: [],
-      hotdata: [],
-      givedata: [],
-      typetab: [{
-        name: '推荐短剧',
-        id: 1
-      },],
-      selecttype: 0,
-      scrollTop: 0,
-      type: 1,
-      mbgColor: this.$mbgColor,
-    }
-  },
-  computed: {
+	import {
+		getMiniprogramHall
+	} from '@/common/apis/index.js'
+	import {
+		getConfigInfo
+	} from "@/common/apis/common.js";
+	import cellGroup from '../../uni_modules/uview-ui/libs/config/props/cellGroup';
+	export default {
+		data() {
+			return {
+				navLock: false,
+				banners: [],
+				hotdata: [],
+				givedata: [],
+				typetab: [{
+					name: '推荐短剧',
+					id: 1
+				}, ],
+				selecttype: 0,
+				scrollTop: 0,
+				type: 1,
+				mbgColor: this.$mbgColor,
+			}
+		},
+		computed: {
 
-  },
-  onPageScroll(e) {
-    if (e.scrollTop > 44) {
-      if (this.navLock == false) {
-        this.navLock = true;
-        uni.setNavigationBarColor({
-          frontColor: "#000000",
-          backgroundColor: "#FFFFFF",
-          complete: () => {
-            this.navLock = false;
-          }
-        });
-      }
-    } else {
-      if (this.navLock == false) {
-        this.navLock = true;
-        let this_ = this
-        uni.setNavigationBarColor({
-          frontColor: "#000000",
-          backgroundColor: this_.mbgColor,
-          complete: () => {
-            this.navLock = false;
-          }
-        });
-      }
-    }
-  },
-  onLoad(e) {
-    this.settitle();
+		},
+		onPageScroll(e) {
+			if (e.scrollTop > 44) {
+				if (this.navLock == false) {
+					this.navLock = true;
+					uni.setNavigationBarColor({
+						frontColor: "#000000",
+						backgroundColor: "#FFFFFF",
+						complete: () => {
+							this.navLock = false;
+						}
+					});
+				}
+			} else {
+				if (this.navLock == false) {
+					this.navLock = true;
+					let this_ = this
+					uni.setNavigationBarColor({
+						frontColor: "#000000",
+						backgroundColor: this_.mbgColor,
+						complete: () => {
+							this.navLock = false;
+						}
+					});
+				}
+			}
+		},
+		onLoad(e) {
+			this.settitle();
 
-  },
-  onShow() {
-    this.getList();
-  },
-  methods: {
-    async settitle() {
-      let res = await getConfigInfo();
-      let config = res.data;
-      uni.setNavigationBarTitle({
-        title: config.play_name
-      });
-    },
-    changeIndex(index) {
-      if (this.typetab[index].id) {
-        this.type = this.typetab[index].id
-        //this.getList(0)
-      }
-      console.log(this.type)
-      this.selecttype = index;
-    },
-    huanyihuan() {
+		},
+		onShow() {
+			this.getList();
+		},
+		methods: {
+			async settitle() {
+				let res = await getConfigInfo();
+				let config = res.data;
+				uni.setNavigationBarTitle({
+					title: config.play_name
+				});
+			},
+			changeIndex(index) {
+				if (this.typetab[index].id) {
+					this.type = this.typetab[index].id
+					//this.getList(0)
+				}
+				console.log(this.type)
+				this.selecttype = index;
+			},
+			huanyihuan() {
 
-    },
-    getList() {
-      getMiniprogramHall().then(res => {
-        console.log(res, 'getMiniprogramHallgetMiniprogramHall')
-        this.banners = res.data.banner
-        this.hotdata = res.data.recommend[0]
-        this.givedata = res.data.recommend[1]
-      })
-    },
-    saoma() {
-      //#ifdef APP-PLUS  
-      uni.scanCode({
-        success: function (res) {
-          if (res.result.indexOf("uid") != -1) {
-            var obj = JSON.parse(res.result);
-            if (obj.uid) {
-              uni.navigateTo({
-                url: '/pages/login/reg?uid=' + obj.uid
-              })
-            }
-          } else {
-            uni.showToast({
-              title: res.result,
-              icon: "none"
-            });
-          }
-        }
-      });
-      //#endif
+			},
+			getList() {
+				getMiniprogramHall().then(res => {
+					console.log(res, 'getMiniprogramHallgetMiniprogramHall')
+					this.banners = res.data.banner
+					this.hotdata = res.data.recommend[0]
+					this.givedata = res.data.recommend[1]
+				})
+			},
+			saoma() {
+				//#ifdef APP-PLUS  
+				uni.scanCode({
+					success: function(res) {
+						if (res.result.indexOf("uid") != -1) {
+							var obj = JSON.parse(res.result);
+							if (obj.uid) {
+								uni.navigateTo({
+									url: '/pages/login/reg?uid=' + obj.uid
+								})
+							}
+						} else {
+							uni.showToast({
+								title: res.result,
+								icon: "none"
+							});
+						}
+					}
+				});
+				//#endif
 
-    },
-    detail(value) {
-      uni.navigateTo({
-        url: '/pages/video/index?video_id=' + value.video_id
-      })
-    },
-    linkTo(e) {
-      console.log(e, 'linkTolinkTolinkTo')
-      let link = e.currentTarget.dataset.link;
-      let type = e.currentTarget.dataset.type;
-      if (type == 'tabbar') {
-        uni.switchTab({
-          url: link
-        })
-      } else {
-        uni.navigateTo({
-          url: link
-        })
-      }
+			},
+			detail(value) {
+				uni.navigateTo({
+					url: '/pages/video/index?video_id=' + value.video_id
+				})
+			},
+			linkTo(e) {
+				console.log(e, 'linkTolinkTolinkTo')
+				let link = e.currentTarget.dataset.link;
+				let type = e.currentTarget.dataset.type;
+				if (type == 'tabbar') {
+					uni.switchTab({
+						url: link
+					})
+				} else {
+					uni.navigateTo({
+						url: link
+					})
+				}
 
-    },
-  },
-}
+			},
+		},
+	}
 </script>
 
 <style lang="scss" scoped>
-.card-wrapper {
-  display: flex;
-  justify-content: start;
+	.home-header {
+		/* height: 300rpx; */
+		width: 100%;
+		position: relative;
+		border-radius: 0rpx 0rpx 48rpx 48rpx;
+	}
 
-  .card {
-    margin: 6px;
-  }
-}
+	.home-mendian {
+		width: 100%;
+		height: 84rpx;
+		background: rgba(255, 255, 255, 0.1);
+		border-radius: 42rpx;
+	}
 
-.home-header {
-  /* height: 300rpx; */
-  width: 100%;
-  position: relative;
-  border-radius: 0rpx 0rpx 48rpx 48rpx;
-}
+	.integral-mall-main {
+		position: relative;
+		/* margin-top: -104rpx; */
+	}
 
-.home-mendian {
-  width: 100%;
-  height: 84rpx;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 42rpx;
-}
+	.integal-mall-menu {
+		width: 100%;
+		height: 190rpx;
+		background: #FFFFFF;
+		border-radius: 20rpx;
+	}
 
-.integral-mall-main {
-  position: relative;
-  /* margin-top: -104rpx; */
-}
+	.integral-mall-goods {
+		width: 100%;
+		height: 280rpx;
+		background: #F2F2F2;
+		border-radius: 16upx;
+	}
 
-.integal-mall-menu {
-  width: 100%;
-  height: 190rpx;
-  background: #FFFFFF;
-  border-radius: 20rpx;
-}
-
-.integral-mall-goods {
-  width: 100%;
-  height: 280rpx;
-  background: #F2F2F2;
-  border-radius: 16upx;
-}
-
-.titleNview-placing {
-  height: var(--status-bar-height);
-  padding-top: 44px;
-  box-sizing: content-box;
-}
+	.titleNview-placing {
+		height: var(--status-bar-height);
+		padding-top: 44px;
+		box-sizing: content-box;
+	}
 </style>