1050 lines
27 KiB
Vue
1050 lines
27 KiB
Vue
<template>
|
||
<view class="index-content">
|
||
<view style="position: relative;top: 0;">
|
||
|
||
<!-- #ifdef H5 -->
|
||
<view class="content-div"
|
||
style="position: fixed;width: 100%;height: 104upx;background-color: #05C25C;z-index: 999999;">
|
||
<!-- #endif -->
|
||
<!-- #ifdef APP-PLUS -->
|
||
<view class="content-div"
|
||
style="position: fixed;width: 100%;height: 154upx;background-color: #05C25C;z-index: 999999;padding-top: 50upx;">
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<view class="content-div"
|
||
style="position: fixed;width: 100%;height: 105upx;background-color: #05C25C;z-index: 999999;">
|
||
<!-- #endif -->
|
||
<view class="icon_header" @tap='goSearch'>
|
||
<image class="header-imgsuo"
|
||
src="https://renwu.xiansqx.com/img/20210813/80dccb59815f4191bbc9fb56a74efe5c.png">
|
||
</image>
|
||
<input type="text" placeholder="输入关键字或者粘贴宝贝标题" class="icon-headerI" style="width: 100%;" />
|
||
<view class="zy_search">搜索</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="tar"></view> -->
|
||
<view class="red_bg">
|
||
<view>
|
||
<swiper class="swiper-container" :autoplay="true" :interval="4000" :circular="true"
|
||
:indicator-dots="false" style="height: 240upx;">
|
||
<swiper-item class="swiper-wrapper" style="" v-for="(item, index3) in bannerList"
|
||
:key="index3" @tap='toNavList(item.linkUrl,item.title)'>
|
||
<image lazy-load='true' fade-show='true' :src="item.imgUrl" v-if="item"
|
||
style="width: 100%;height: 240upx;overflow: hidden;border-radius: 32upx;"
|
||
mode="scaleToFill"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- #ifdef H5 -->
|
||
<view style="width:100%;height:12upx;"></view>
|
||
<!-- #endif -->
|
||
<!-- #ifndef H5 -->
|
||
<view style="width:100%;height:57upx;"></view>
|
||
<!-- #endif -->
|
||
<!--首页菜单开始-->
|
||
<view class="category" v-if="navlist.length>0">
|
||
<view class="box">
|
||
<swiper class="swiper" duration="300" :style="{ height: categoryHeight }"
|
||
@change="categoryChange">
|
||
<swiper-item v-for="(nav, index5) in navlist" :key="index5">
|
||
<view class="category-list">
|
||
<view class="icon" v-for="(item,ind) in nav" :key="ind"
|
||
@tap="toNavList(item.url, item.title)">
|
||
<image mode="widthFix" :src="item.image_url" style="height: 90upx;width: 90upx">
|
||
</image>
|
||
<view>{{ item.title }}</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="dots">
|
||
<view v-for="(page, pageindex) in navlist" :key="pageindex"
|
||
:class="{ active: pageindex == currentPageindex }"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="index-views" style="margin-top: 5upx;border-radius: 15upx;">
|
||
<view class="jx" @tap="goCommondityList('精选好物')">
|
||
<view class="jx_row1">
|
||
<text class="jx_tit">精选好物</text>
|
||
<text class="note">精选畅销品</text>
|
||
</view>
|
||
<view class="jx_img_wrap">
|
||
<image :src="jximg1" lazy-load="true"></image>
|
||
</view>
|
||
</view>
|
||
<view class="rm" @tap="goCommondityList('热卖榜单')">
|
||
<text class="jx_tit">热卖榜单</text>
|
||
<text class="note">全球惊喜爆款</text>
|
||
<image :src="rmimg1" lazy-load="true"></image>
|
||
</view>
|
||
<view class="sx" @tap="goCommondityList('每日上新')">
|
||
<text class="jx_tit">每日上新</text>
|
||
<text class="note">每日活动福利</text>
|
||
<image :src="newsimg1" lazy-load="true"></image>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="header-wus" v-if="mrscList.length>0">
|
||
<view @tap="goCommondityList('推荐商品')" style="display: flex;margin-bottom: 20upx;">
|
||
<view style="color:#333333;width: 86%; font-size: 32upx;font-weight: bold;">
|
||
为你推荐
|
||
</view>
|
||
<view class="sale">超级折扣价</view>
|
||
<view class="fr-jutext" style="width: 86%;text-align: right;color: #999999;">查看更多<text
|
||
class="cuIcon-right" style="margin-left: 2px"></text></view>
|
||
</view>
|
||
<view style="display: flex;justify-content: space-around;"
|
||
v-if="mrscList.length>0">
|
||
<view v-for="(g, index) in mrscList" :key="index" class="box-float" @tap='goDetail(g.id)'>
|
||
<image lazy-load='true' fade-show='true'
|
||
style="border-radius: 16upx;width: 214upx;height: 214upx;margin-right: 20upx;"
|
||
class="image" :src="g.coverImg" mode="scaleToFill"></image>
|
||
<!-- <view class="index-conts">{{g.title}}</view> -->
|
||
<view style="text-align: center;">
|
||
<view v-if="relation" class="index-conts2"><text
|
||
style="font-size: 30upx;">￥</text>{{ g.memberPrice }}
|
||
<text
|
||
style="font-size: 24upx;color: #999999;text-decoration:line-through;margin-left: 4upx">￥{{g.originalPrice}}</text>
|
||
</view>
|
||
<view v-if='!relation' class="index-conts2">
|
||
<text style="font-size: 30upx;">￥</text>{{ g.price }}
|
||
<text
|
||
style="font-size: 20upx;color: #999999;text-decoration:line-through;margin-left: 4upx;font-weight:400;">￥{{g.originalPrice}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="header-wus" v-if="wlcgList.length>0">
|
||
<view @tap="goWlcgList()" style="display: flex;margin-bottom: 20upx;">
|
||
<view style="color:#333333;width: 86%; font-size: 32upx;font-weight: bold;">
|
||
物料采购
|
||
</view>
|
||
<view class="fr-jutext" style="width: 86%;text-align: right;color: #999999;">查看更多<text
|
||
class="cuIcon-right" style="margin-left: 2px"></text></view>
|
||
</view>
|
||
<view style="display: flex;justify-content: space-around;"
|
||
v-if="wlcgList.length>0">
|
||
<view v-for="(g, index) in wlcgList" :key="index" class="box-float" @tap='goDetail(g.id)'>
|
||
<image lazy-load='true' fade-show='true'
|
||
style="border-radius: 16upx;width: 214upx;height: 214upx;margin-right: 20upx;"
|
||
class="image" :src="g.coverImg" mode="scaleToFill"></image>
|
||
<!-- <view class="index-conts">{{g.title}}</view> -->
|
||
<view style="text-align: center;">
|
||
<view v-if="relation" class="index-conts2"><text
|
||
style="font-size: 30upx;">￥</text>{{ g.memberPrice }}
|
||
<text
|
||
style="font-size: 24upx;color: #999999;text-decoration:line-through;margin-left: 4upx">￥{{g.originalPrice}}</text>
|
||
</view>
|
||
<view v-if='!relation' class="index-conts2">
|
||
<text style="font-size: 30upx;">￥</text>{{ g.price }}
|
||
<text
|
||
style="font-size: 20upx;color: #999999;text-decoration:line-through;margin-left: 4upx;font-weight:400;">￥{{g.originalPrice}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="homegoodsList.length>0"
|
||
style="text-align: center;margin-top: 20upx;margin-bottom: 16upx;padding-top: 16upx;">
|
||
<!-- <text class="news_title">一一一</text> -->
|
||
<image class="arrow_img"
|
||
src="https://renwu.xiansqx.com/img/20210813/27fb1e44511845a19c3ce6fb2caa7d5d.png"></image>
|
||
<text class="zy_jx_tit">精选好物</text>
|
||
<!-- <text class="news_title">一一一</text> -->
|
||
<image class="arrow_img"
|
||
src="https://renwu.xiansqx.com/img/20210813/e2030ed821db41de87c468e82534c644.png"></image>
|
||
</view>
|
||
<!-- #ifdef H5 -->
|
||
<view style="display: flex;flex-wrap: wrap;margin-bottom: 0upx;padding: 20upx;"
|
||
v-if="homegoodsList.length>0">
|
||
<!-- #endif -->
|
||
<!-- #ifndef H5 -->
|
||
<view style="display: flex;flex-wrap: wrap;margin-bottom: 0upx;padding: 20upx;"
|
||
v-if="homegoodsList.length>0">
|
||
<!-- #endif -->
|
||
<view
|
||
style="width: 100%; background-color: #FFFFFF; border-radius: 20upx;overflow: hidden;box-shadow: rgba(183, 183, 183, 0.3) 1px 1px 10px 1px;margin-bottom: 20upx;display: flex;"
|
||
@tap='goDetail(item.id)' v-for="(item,index) in homegoodsList" :key='index'
|
||
v-if="homegoodsList.length > 0">
|
||
<image :src="item.coverImg" lazy-load="true"
|
||
style="width: 250upx;height: 250upx;flex-shrink: 0;"></image>
|
||
<view style="padding: 16upx 16upx 16upx 20upx;flex: 1;">
|
||
<view style="margin: 5upx 2upx 20upx;">
|
||
<view style="width: 100%;height: 60upx;">
|
||
<text class="limapboxqing2"><text class="indexr"
|
||
style=""><text>自营</text></text>{{ item.title }}</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="reverse">
|
||
<view class="" v-if="item.descrition&&isEnable == '是'">预估返￥{{ item.descrition }}</view>
|
||
</view> -->
|
||
<view style="display: flex;flex-direction: column;justify-content: space-between;">
|
||
<view
|
||
style="padding: 0rpx 0;display: flex;justify-content: space-between;margin:50upx 0 12upx;">
|
||
<view style="display: flex;justify-content: space-between;width: 94%;">
|
||
<view v-if="relation"
|
||
style="font-size: 38upx;color: #05C25C;font-weight: 700;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
|
||
<text style="font-size:20upx;">¥</text> {{item.memberPrice}}
|
||
</view>
|
||
<view v-if='!relation'
|
||
style="font-size: 38upx;color: #05C25C;font-weight: 700;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
|
||
<text style="font-size:20upx;margin-right: 10upx">¥</text>
|
||
{{item.price}}
|
||
</view>
|
||
<view
|
||
style="margin-left:10px;font-size: 24upx;color: #999999;margin-top: 10upx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: left;">
|
||
已售{{item.sales}}件</view>
|
||
</view>
|
||
<!-- <view v-if="item.descrition&&isEnable == '是'" style="color: rgb(254, 108, 0);font-size: 24upx;padding: 8upx 0;">预估返￥ {{item.descrition}}</view> -->
|
||
</view>
|
||
|
||
<view
|
||
style="display: flex;align-items: center;font-size: 24upx;color: rgb(153, 153, 153);">
|
||
<image style="height: 30upx;width:30upx;margin-right: 4upx;"
|
||
src="https://renwu.xiansqx.com/img/20210813/78058c9a635e4822853306964fa02d09.png">
|
||
</image>
|
||
<view>盛安到家自营店铺</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<!-- 悬浮上拉 -->
|
||
<view class="scroll_top" @tap="topScrollTap" v-bind:class="[scrollTop ? 'active' : '','']"
|
||
style="bottom: 56px;">
|
||
<text class="iconfont icon-shangla"></text>
|
||
</view>
|
||
<!-- 加载更多提示 -->
|
||
<view class="s-col is-col-24" v-if="homegoodsList.length > 0">
|
||
<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
TabCur: 0,
|
||
day: 1,
|
||
hour: 2,
|
||
page: 0,
|
||
size: 10,
|
||
minute: 30,
|
||
money: 0,
|
||
relation: false,
|
||
jximg1: '',
|
||
isEnable: '否',
|
||
rmimg1: '',
|
||
newsimg1: '',
|
||
homegoodsList: [],
|
||
bannerList: [],
|
||
mrscList: [],
|
||
wlcgList: [],
|
||
navlist: [],
|
||
relation_id: '',
|
||
navlists: [],
|
||
loadingType: 0,
|
||
scrollTop: false,
|
||
|
||
categoryHeight: '300rpx',
|
||
currentPageindex: 0,
|
||
contentText: {
|
||
contentdown: "上拉显示更多",
|
||
contentrefresh: "正在加载...",
|
||
contentnomore: "没有更多数据了"
|
||
}
|
||
}
|
||
},
|
||
onShow() {
|
||
let relation_id = this.$queue.getData('relation_id');
|
||
this.relation_id = relation_id;
|
||
if (relation_id && relation_id !== 'undefined') {
|
||
this.relation = true;
|
||
} else {
|
||
this.relation = false;
|
||
}
|
||
let a = this.$queue.getData("isEnable")
|
||
if (a === '是') {
|
||
let b = this.$queue.getData('isLieBiaoEnable');
|
||
if (b) {
|
||
this.isEnable = b;
|
||
} else {
|
||
this.isEnable = a;
|
||
}
|
||
} else {
|
||
this.isEnable = a;
|
||
}
|
||
this.getmrsc();
|
||
this.getHomeGoods();
|
||
this.getwlcg();
|
||
},
|
||
onLoad() {
|
||
this.getBannerList();
|
||
this.loadMenuList();
|
||
},
|
||
methods: {
|
||
//更新分类指示器
|
||
categoryChange(event) {
|
||
this.currentPageindex = event.detail.current;
|
||
},
|
||
/**
|
||
* 登录检测
|
||
*/
|
||
loginS() {
|
||
//#ifdef H5
|
||
uni.navigateTo({
|
||
url: '/pages/public/login'
|
||
});
|
||
//#endif
|
||
//#ifndef H5
|
||
uni.navigateTo({
|
||
url: '/pages/public/login'
|
||
});
|
||
//#endif
|
||
},
|
||
/**
|
||
* 会员授权界面
|
||
*/
|
||
goPublisherInfo() {
|
||
let token = this.$queue.getData('token');
|
||
let userId = this.$queue.getData('userId');
|
||
if (token) {
|
||
uni.navigateTo({
|
||
url: '/pages/member/publisher?uid=' + userId + '&token=' + token
|
||
});
|
||
} else {
|
||
this.loginS();
|
||
}
|
||
},
|
||
getmrsc() {
|
||
this.$Request.getT('/app/goods/recommend?page=0&size=3&sort=createAt').then(res => {
|
||
if (res.status === 0) {
|
||
this.mrscList = res.data.content;
|
||
}
|
||
});
|
||
},
|
||
getwlcg() {
|
||
this.$Request.getT('/app/goods/wlcglist?page=0&size=3&sort=createAt').then(res => {
|
||
if (res.status === 0) {
|
||
this.wlcgList = res.data.content;
|
||
}
|
||
});
|
||
},
|
||
getNews() {
|
||
this.$Request.getT('/app/goods/news?page=0&size=1&sort=createAt').then(res => {
|
||
if (res.status === 0) {
|
||
this.newsimg1 = res.data.content[0].coverImg;
|
||
}
|
||
});
|
||
},
|
||
topScrollTap: function() {
|
||
uni.pageScrollTo({
|
||
scrollTop: 0,
|
||
duration: 300
|
||
});
|
||
},
|
||
getSelectGoods() {
|
||
this.$Request.getT('/app/goods/selectGoods?page=0&size=1&sort=createAt ').then(res => {
|
||
if (res.status === 0) {
|
||
this.jximg1 = res.data.content[0].coverImg;
|
||
}
|
||
});
|
||
},
|
||
getSellingList() {
|
||
this.$Request.getT('/app/goods/selling?page=0&size=1&sort=sales').then(res => {
|
||
if (res.status === 0) {
|
||
this.rmimg1 = res.data.content[0].coverImg;
|
||
}
|
||
});
|
||
},
|
||
getHomeGoods(type) {
|
||
this.loadingType = 1;
|
||
this.$Request.getT('/app/goods/homeGoods?page=' + this.page + '&size=' + this.size).then(res => {
|
||
if (res.status === 0) {
|
||
if (this.page === 0 || res.status) {
|
||
this.homegoodsList = [];
|
||
}
|
||
let grade = this.$queue.getData('grade');
|
||
res.data.content.forEach(d => {
|
||
d.descrition = '';
|
||
// if (d.commissionPrice != 0) {
|
||
// if (grade) {
|
||
// if (this.relation) {
|
||
// d.descrition = ((parseFloat(d.memberPrice) * parseFloat(d
|
||
// .commissionPrice)) * parseFloat(grade)).toFixed(
|
||
// 2);
|
||
// } else {
|
||
// d.descrition = ((parseFloat(d.price) * parseFloat(d
|
||
// .commissionPrice)) * parseFloat(grade)).toFixed(2);
|
||
// }
|
||
// } else {
|
||
// if (this.relation) {
|
||
// d.descrition = ((parseFloat(d.memberPrice) * parseFloat(d
|
||
// .commissionPrice)) * parseFloat(this.$queue
|
||
// .minMoney()))
|
||
// .toFixed(2);
|
||
// } else {
|
||
// d.descrition = ((parseFloat(d.price) * parseFloat(d
|
||
// .commissionPrice)) * parseFloat(this.$queue
|
||
// .minMoney()))
|
||
// .toFixed(2);
|
||
// }
|
||
// }
|
||
// }
|
||
d.sales = d.sales > 10000 ? (d.sales / 10000).toFixed(1) + '万' : d.sales;
|
||
this.homegoodsList.push(d);
|
||
console.log(this.homegoodsList)
|
||
});
|
||
if (res.data.content.length === this.size) {
|
||
this.loadingType = 0;
|
||
} else {
|
||
this.loadingType = 3;
|
||
}
|
||
} else {
|
||
this.loadingType = 2;
|
||
}
|
||
if (type === "Refresh") {
|
||
uni.stopPullDownRefresh(); // 停止刷新
|
||
}
|
||
});
|
||
},
|
||
goSearch() {
|
||
uni.navigateTo({
|
||
url: '/package/pages/zysc/index/search'
|
||
});
|
||
},
|
||
goCommondityList(name) {
|
||
uni.navigateTo({
|
||
url: '/package/pages/zysc/index/commodityList?name=' + name
|
||
});
|
||
},
|
||
goWlcgList() {
|
||
uni.navigateTo({
|
||
url: '/package/pages/zysc/index/wlcgList?name=物料采购'
|
||
});
|
||
},
|
||
// 传进数组和指定个数，进行拆分
|
||
chunk: function(array, size) {
|
||
//获取数组的长度，如果你传入的不是数组，那么获取到的就是undefined
|
||
const length = array.length
|
||
//判断不是数组，或者size没有设置，size小于1，就返回空数组
|
||
if (!length || !size || size < 1) {
|
||
return []
|
||
}
|
||
//核心部分
|
||
let index = 0 //用来表示切割元素的范围start
|
||
let resIndex = 0 //用来递增表示输出数组的下标
|
||
|
||
//根据length和size算出输出数组的长度，并且创建它。
|
||
let result = new Array(Math.ceil(length / size))
|
||
//进行循环
|
||
while (index < length) {
|
||
//循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
|
||
result[resIndex++] = array.slice(index, (index += size))
|
||
}
|
||
//输出新数组
|
||
return result
|
||
},
|
||
loadMenuList: function() {
|
||
this.$Request.getT('/selfActivity/state?state=1').then(res => {
|
||
if (res.status === 0) {
|
||
if (res.data.length > 0) {
|
||
var datanew = this.chunk(res.data, 10)
|
||
this.navlist = datanew;
|
||
if (res.data.length > 5) {
|
||
this.categoryHeight = "300rpx"
|
||
} else {
|
||
this.categoryHeight = "150rpx"
|
||
}
|
||
}
|
||
}
|
||
});
|
||
this.$Request.getT('/selfActivity/state?state=3').then(res => {
|
||
if (res.status === 0) {
|
||
if (res.data.length > 0) {
|
||
this.jximg1 = res.data[0].image_url;
|
||
}
|
||
}
|
||
});
|
||
this.$Request.getT('/selfActivity/state?state=4').then(res => {
|
||
if (res.status === 0) {
|
||
if (res.data.length > 0) {
|
||
this.rmimg1 = res.data[0].image_url;
|
||
}
|
||
}
|
||
});
|
||
this.$Request.getT('/selfActivity/state?state=5').then(res => {
|
||
if (res.status === 0) {
|
||
if (res.data.length > 0) {
|
||
this.newsimg1 = res.data[0].image_url;
|
||
}
|
||
}
|
||
});
|
||
},
|
||
goDetail(id) {
|
||
uni.navigateTo({
|
||
url: '/package/pages/zysc/index/commoditydetail?ordersId=' + id
|
||
});
|
||
},
|
||
/**
|
||
* @param {Object} url
|
||
*/
|
||
toNavList: function(url, title) {
|
||
let token = this.$queue.getData('token');
|
||
if (token) {
|
||
if (url.indexOf('/pages/') !== -1 || url.indexOf('/package/') !== -1 || url.indexOf('/my/') !== -
|
||
1) {
|
||
console.log(url);
|
||
uni.navigateTo({
|
||
url
|
||
});
|
||
} else {
|
||
//#ifndef H5
|
||
uni.navigateTo({
|
||
url: '/pages/member/webview?url=' + url
|
||
});
|
||
//#endif
|
||
//#ifdef H5
|
||
if (url.indexOf('http://') !== -1 && url.indexOf('https://') !== -1) {
|
||
window.location.href = url;
|
||
} else {
|
||
window.location.href = 'http://' + url;
|
||
|
||
}
|
||
//#endif
|
||
}
|
||
} else {
|
||
this.goLoginInfo();
|
||
}
|
||
},
|
||
getBannerList() {
|
||
this.$Request.getT('/advert/list').then(res => {
|
||
if (res.status === 0) {
|
||
this.bannerList = [];
|
||
res.data.forEach(d => {
|
||
this.bannerList.push(d)
|
||
});
|
||
}
|
||
});
|
||
},
|
||
goMyList() {
|
||
let token = this.$queue.getData('token');
|
||
if (token) {
|
||
uni.navigateTo({
|
||
url: '/package/pages/zysc/my/myList'
|
||
});
|
||
} else {
|
||
this.goLoginInfo();
|
||
}
|
||
},
|
||
//统一登录跳转
|
||
goLoginInfo() {
|
||
this.$queue.setData('href', '/pages/zysc/index/index');
|
||
//#ifdef H5
|
||
uni.navigateTo({
|
||
url: '/pages/public/login'
|
||
});
|
||
//#endif
|
||
//#ifndef H5
|
||
uni.navigateTo({
|
||
url: '/pages/public/login'
|
||
});
|
||
//#endif
|
||
},
|
||
tabSlect(item, index) {
|
||
this.TabCur = index;
|
||
}
|
||
},
|
||
onPageScroll: function(e) {
|
||
this.scrollTop = e.scrollTop > 200;
|
||
},
|
||
onReachBottom: function() {
|
||
this.page = this.page + 1;
|
||
this.getHomeGoods('');
|
||
},
|
||
onPullDownRefresh: function() {
|
||
this.page = 0;
|
||
this.min_id = 1;
|
||
this.getHomeGoods("Refresh");
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '../../../../static/css/index.css';
|
||
|
||
page {
|
||
background: #F5F0F0;
|
||
}
|
||
|
||
.index-views {
|
||
// display: flex;
|
||
// position: relative;
|
||
background: #fefeff;
|
||
margin: -12upx 20upx 0;
|
||
// border-radius: 10upx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
|
||
.jx {
|
||
width: 342rpx;
|
||
position: relative;
|
||
align-items: center;
|
||
background: url(https://renwu.xiansqx.com/img/20210813/440b6b02210245c1936bc4bedd243866.png);
|
||
background-size: cover;
|
||
|
||
.jx_row1 {
|
||
padding-left: 27rpx;
|
||
position: relative;
|
||
top: -18rpx;
|
||
|
||
.jx_tit {
|
||
margin-right: 13rpx;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.note {
|
||
|
||
font-size: 20rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
color: #FC5AA5;
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.jx_img_wrap {
|
||
position: relative;
|
||
top: 4rpx;
|
||
text-align: center;
|
||
|
||
image {
|
||
width: 90rpx;
|
||
height: 105rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.rm {
|
||
width: 167rpx;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
align-items: center;
|
||
padding-top: 20rpx;
|
||
background: url(https://renwu.xiansqx.com/img/20210813/4457e519493e48e68567175f8285dbfc.png);
|
||
|
||
.jx_tit {
|
||
margin-left: 27rpx;
|
||
margin-right: 13rpx;
|
||
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.note {
|
||
|
||
font-size: 20rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
color: #F3B398;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
image {
|
||
width: 90rpx;
|
||
height: 105rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
|
||
.sx {
|
||
background: url(https://renwu.xiansqx.com/img/20210813/ba73ec1fe15c4e8886834da81fa4d180.png);
|
||
width: 167rpx;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
align-items: center;
|
||
padding-top: 20rpx;
|
||
|
||
.jx_tit {
|
||
margin-left: 27rpx;
|
||
margin-right: 13rpx;
|
||
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.note {
|
||
|
||
font-size: 20rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 500;
|
||
color: #5988FA;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
image {
|
||
width: 90rpx;
|
||
height: 105rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sale {
|
||
background: url(https://renwu.xiansqx.com/img/20210813/f7e4e8af89aa48998b5ec0d89da162f1.png);
|
||
background-size: cover;
|
||
font-size: 20upx;
|
||
width: 320rpx;
|
||
height: 32rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
position: relative;
|
||
left: -108rpx;
|
||
top: 8rpx;
|
||
}
|
||
|
||
.arrow_img {
|
||
width: 78rpx;
|
||
height: 23rpx;
|
||
|
||
}
|
||
|
||
.zy_jx_tit {
|
||
|
||
font-size: 42rpx;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
line-height: 32rpx;
|
||
color: #FF0000;
|
||
margin: 0 10rpx;
|
||
}
|
||
|
||
.reverse {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: flex-end;
|
||
margin-top: 28rpx;
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC;
|
||
/* font-weight: bold; */
|
||
color: #FFFFFF;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.reverse>view:nth-child(1) {
|
||
padding: 4rpx 10rpx;
|
||
background: #05C25C;
|
||
border-radius: 5px;
|
||
color: #ffffff;
|
||
margin-right: 20rpx;
|
||
position: relative;
|
||
top: 10rpx;
|
||
}
|
||
|
||
|
||
.index-conts {
|
||
width: 200upx;
|
||
margin-bottom: 7px;
|
||
overflow: hidden;
|
||
-o-text-overflow: ellipsis;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
display: block;
|
||
}
|
||
|
||
.indexr {
|
||
color: #FFFFFF;
|
||
background: #05C25C;
|
||
font-size: 22upx;
|
||
padding-left: 12upx;
|
||
display: inline-block;
|
||
padding-right: 13upx;
|
||
border-radius: 8upx;
|
||
margin-right: 8upx;
|
||
padding-top: 2upx;
|
||
padding-bottom: 2upx;
|
||
}
|
||
|
||
.index-conts2 {
|
||
font-size: 30upx;
|
||
font-weight: bold;
|
||
position: absolute;
|
||
// float: left;
|
||
color: #FF2638;
|
||
width: 80%;
|
||
text-align: center;
|
||
}
|
||
|
||
.header-imgsuo {
|
||
width: 37rpx;
|
||
height: 31rpx;
|
||
margin-right: 10upx;
|
||
align-items: center;
|
||
display: block;
|
||
}
|
||
|
||
.limapboxqing2 {
|
||
|
||
font-size: 28upx;
|
||
color: #333333;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.icon_header {
|
||
width: 700upx;
|
||
display: flex;
|
||
height: 77upx;
|
||
align-items: center;
|
||
line-height: 40upx;
|
||
padding: 10upx 20upx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 15upx;
|
||
margin-top: 14upx;
|
||
// margin-left: -20upx;
|
||
}
|
||
|
||
.swiper-container {
|
||
width: 690upx;
|
||
height: 300upx;
|
||
border-radius: 4upx;
|
||
transform: translateY(0);
|
||
overflow: hidden;
|
||
overflow: hidden !important;
|
||
/* 兼容IOS，否则在swiper组件内的布局都不受border-radius和overflow的约束 */
|
||
transform: translateY(0) !important;
|
||
|
||
position: relative;
|
||
/* #ifdef APP-PLUS */
|
||
top: 120upx;
|
||
/* #endif */
|
||
/* #ifdef H5 */
|
||
top: 130upx;
|
||
/* #endif */
|
||
/* #ifdef MP-WEIXIN */
|
||
top: 80upx;
|
||
/* #endif */
|
||
right: 0upx;
|
||
left: 0;
|
||
margin: auto;
|
||
}
|
||
|
||
.content-div {
|
||
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
z-index: 999;
|
||
}
|
||
|
||
.icon-headerI {
|
||
font-size: 24upx;
|
||
color: #999999;
|
||
}
|
||
|
||
.news_title {
|
||
font-weight: bold;
|
||
color: #FF2638;
|
||
margin-right: 32upx;
|
||
margin-left: 32upx;
|
||
width: 12upx;
|
||
}
|
||
|
||
.header-wus {
|
||
background-color: #FFFFFF;
|
||
position: relative;
|
||
margin: 27upx 20upx 0upx 20upx;
|
||
border-radius: 10upx;
|
||
padding: 28upx 28upx 50upx;
|
||
}
|
||
|
||
.header-wus2 {
|
||
color: #333333;
|
||
font-size: 32upx;
|
||
margin-bottom: 10upx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.header-wus3 {
|
||
color: #333333;
|
||
font-size: 30upx;
|
||
margin-bottom: 10upx;
|
||
}
|
||
|
||
.home-bg {
|
||
background: #FF2222;
|
||
height: 350upx;
|
||
border-bottom-right-radius: 32upx;
|
||
border-bottom-left-radius: 32upx;
|
||
|
||
}
|
||
|
||
|
||
.box-float {
|
||
width: 235upx;
|
||
position: relative;
|
||
border-radius: 10upx;
|
||
padding: 6upx 0;
|
||
}
|
||
|
||
|
||
.icon_search {
|
||
background: #f6f6f6;
|
||
border-radius: 22px;
|
||
height: 69upx;
|
||
line-height: 66upx;
|
||
font-size: 28upx;
|
||
color: #dcdcdc;
|
||
text-align: left;
|
||
text-indent: 17px;
|
||
}
|
||
|
||
.index_header {
|
||
background: #FF332F;
|
||
/* #ifdef H5 */
|
||
height: 110upx;
|
||
/* #endif */
|
||
/* #ifdef APP-PLUS */
|
||
height: 170upx;
|
||
padding-top: 50upx;
|
||
/* #endif */
|
||
/* #ifdef MP-WEIXIN */
|
||
height: 110upx;
|
||
/* #endif */
|
||
background-size: 100%;
|
||
position: fixed;
|
||
z-index: 999;
|
||
width: 100%;
|
||
background: #05C25C
|
||
}
|
||
|
||
.category {
|
||
width: 100%;
|
||
/* #ifdef APP-PLUS */
|
||
padding: 20upx;
|
||
/* #endif */
|
||
/* #ifndef APP-PLUS */
|
||
padding: 20upx;
|
||
/* #endif */
|
||
|
||
.box {
|
||
width: 100%;
|
||
border-radius: 20upx;
|
||
background-color: #ffffff;
|
||
|
||
.dots {
|
||
display: flex;
|
||
justify-content: center;
|
||
height: 15upx;
|
||
width: 100%;
|
||
|
||
view {
|
||
width: 30upx;
|
||
height: 5upx;
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
|
||
&.active {
|
||
background-color: #05C25C;
|
||
}
|
||
}
|
||
}
|
||
|
||
.swiper {
|
||
width: 100%;
|
||
padding: 10upx 0;
|
||
|
||
.uni-swiper-dot {
|
||
width: 20upx;
|
||
}
|
||
|
||
.category-list {
|
||
width: 100%;
|
||
height: auto;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
padding: 10upx 0 0;
|
||
flex-flow: wrap;
|
||
|
||
.icon {
|
||
width: 20%;
|
||
display: flex;
|
||
flex-flow: wrap;
|
||
justify-content: center;
|
||
font-size: 22upx;
|
||
color: #666;
|
||
margin-bottom: 20upx;
|
||
|
||
image {
|
||
width: 70%;
|
||
height: 13.3vw;
|
||
}
|
||
|
||
view {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.zy_search {
|
||
width: 108rpx;
|
||
height: 74rpx;
|
||
line-height: 74rpx;
|
||
text-align: center;
|
||
background: #05C25C;
|
||
color: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
position: relative;
|
||
right: -20rpx;
|
||
}
|
||
|
||
.red_bg {
|
||
width: 750rpx;
|
||
/* #ifdef MP-WEIXIN */
|
||
height: 300rpx;
|
||
/* #endif */
|
||
/* #ifndef MP-WEIXIN */
|
||
height: 360rpx;
|
||
/* #endif */
|
||
border-radius: 0 0 34% 34%;
|
||
background-color: #05C25C;
|
||
padding-top: var(--status-bar-height);
|
||
|
||
}
|
||
</style> |