sadjv3_jishi/package/pages/zysc/index/index.vue

1050 lines
27 KiB
Vue
Raw Normal View History

2024-06-05 19:14:51 +08:00
<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>
2024-07-02 19:50:22 +08:00
<view style="display: flex;justify-content: space-around;"
2024-06-05 19:14:51 +08:00
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> -->
2024-07-02 19:50:22 +08:00
<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;">
2024-06-05 19:14:51 +08:00
<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>
2024-06-05 19:14:51 +08:00
</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: [],
2024-07-02 19:50:22 +08:00
wlcgList: [],
2024-06-05 19:14:51 +08:00
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();
2024-07-02 19:50:22 +08:00
this.getwlcg();
2024-06-05 19:14:51 +08:00
},
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;
}
});
},
2024-07-02 19:50:22 +08:00
getwlcg() {
this.$Request.getT('/app/goods/wlcglist?page=0&size=3&sort=createAt').then(res => {
if (res.status === 0) {
this.wlcgList = res.data.content;
}
});
},
2024-06-05 19:14:51 +08:00
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
});
},
2024-07-02 19:50:22 +08:00
goWlcgList() {
uni.navigateTo({
url: '/package/pages/zysc/index/wlcgList?name=物料采购'
});
},
2024-06-05 19:14:51 +08:00
// 传进数组和指定个数,进行拆分
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;
2024-07-02 19:50:22 +08:00
// float: left;
2024-06-05 19:14:51 +08:00
color: #FF2638;
width: 80%;
2024-07-02 19:50:22 +08:00
text-align: center;
2024-06-05 19:14:51 +08:00
}
.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>