12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343 |
- <template>
- <view class="index">
- <navbar :config="config" @searchClick="searchClick">
- <view slot="right" style="
- font-size: 36rpx;
- font-weight: 500;
- color: #ffffff;
- margin-right: 30rpx;
- ">
- <text class="iconfont" style="font-size: 40rpx;" @click="goToMsg()">
- 
- <view class="num" v-if="msgCenter==0?false:msgCenter">{{msgCenter}}</view>
- </text>
- </view>
- </navbar>
- <view class="top"></view>
- <view class="swiper">
- <view class="uni-margin-wrap">
- <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
- circular=ture>
- <swiper-item v-for="item in shopBanner" :key="item.id">
- <view class="swiper-item" @click="
- imgLink(item.model_type, item.model_id, item.url, item.shop_id)
- " mode="aspectFill">
- <image class="bannersize" :src="item.cover"></image>
- </view>
- </swiper-item>
- </swiper>
- </view>
- </view>
- <view class="list">
- <view class="item" @click="goDetail('/pages/research/nearby/timeLimit')">
- <image :src="imgUrl+'/index/alarmClock.png'" mode=""></image>
- <view class="font">限时秒杀</view>
- </view>
- <view class="item" @click="goDetail('/pages/research/homepage/groupList')">
- <image :src="imgUrl+'/index/spell.png'" mode=""></image>
- <view class="font">拼团</view>
- </view>
- <view class="item" @click="goDetail('/pages/pointsMall/index')">
- <image :src="imgUrl+'/index/integral.png'" mode=""></image>
- <view class="font">积分商城</view>
- </view>
- <!-- <view class="item" @click="goDetail('/pages/user/wallet/cardBag', true)">
- <image :src="imgUrl+'/index/oneCardSolution.png'" mode=""></image>
- <view class="font">一卡通</view>
- </view> -->
- <view class="item" @click="goDetail('/pages/research/nearby/facade')">
- <image :src="imgUrl+'/index/nearby.png'" mode=""></image>
- <view class="font">附近门店</view>
- </view>
- </view>
- <!-- 广告 -->
- <view class="advertisement" v-for='item in shopBanner2' :key="item.id" @click="
- imgLink(item.model_type, item.model_id, item.url)
- ">
- <image :src="item.cover" mode="aspectFill"></image>
- </view>
- <!-- 限时秒杀 -->
- <view class="seckill" v-if="currSeckill && currSeckill.length > 0">
- <view class="seckill-item">
- <view class="seckill-top" @click="goDetail('/pages/research/nearby/timeLimit')">
- <view class="left">限时秒杀</view>
- <view class="line" v-if="currTime"></view>
- <view class="time" v-if="currTime">{{ currTime }}点场 剩余</view>
- <view class="reciprocal" v-if="currTime">
- <uni-countdown :backgroundColor="'none'" @timeup="overDown2" :color="'#fff'"
- :splitorColor="'#fff'" :show-day="time2[0] > 0" :day="time2[0]" :hour="time2[1]"
- :minute="time2[2]" :second="time2[3]"></uni-countdown>
- </view>
- </view>
- <view class="option" v-if="currSeckill && currSeckill.length > 0">
- <swiper :indicator-dots="false" :autoplay="false" :display-multiple-items="itemsDis2"
- @change="imgActiveFun2" style="height: 220rpx" circular="true">
- <swiper-item class="option-item" @click="
- goProductDetails(
- '/pages/product/goods/seckillGoods?id=' + item.id
- )
- " v-for="item in currSeckill" :key="item.id">
- <!-- <view class="option-item" v-for="item in currSeckill" :key="item.id"> -->
- <image v-if="item && item.cover" :src="item.cover" mode=""></image>
- <view class="number">
- <rich-text :nodes="$mUtil.priceBigSmall(item.min_price)"></rich-text>
- </view>
- <!-- </view> -->
- </swiper-item>
- </swiper>
- <view class="slide-box">
- <view class="dotBox" :style="{ marginLeft: ml2 + 'rpx' }" v-if="currSeckill.length > 0">
- <view class="dotBox_item" v-for="(v, i) in keyList2" :key="i"
- :class="{ active_dotBox: activeBannerIndex2 == i }"></view>
- </view>
- </view>
- </view>
- <!-- <view class="scroll" v-if="currSeckill && currSeckill.length > 0"
- ><view class="scroll-red"></view
- ></view> -->
- <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
- </view>
- </view>
- <!-- 拼团购 -->
- <view class="group-work" v-if="groupList && groupList.length > 0">
- <view class="work-top" @click="goDetail('/pages/research/homepage/groupList')">
- <view class="top-left">拼团购</view>
- <view class="top-right" style="color: #999999;">
- 查看更多
- <text class="iconfont u-font24 u-999"style="margin-left: 10rpx;"></text>
- </view>
- </view>
- <view v-if="groupList && groupList.length > 0">
- <view class="middle" v-for="item in groupList" :key="item.id" @click="
- goProductDetails('/pages/product/goods/puzzleGoods?id=' + item.id)
- ">
- <view class="middle-left">
- <image v-if="item && item.cover" :src="item.cover" mode=""></image>
- </view>
- <view class="middle-right">
- <view class="middle-title u-text2">{{ item.title }}</view>
- <view class="division">
- <view class="middle-num">
- <view class="contain">
- <view class="large">
- <rich-text :nodes="$mUtil.priceBigSmall(item.min_price)"></rich-text>
- </view>
- <view class="small">¥ {{ item.min_sale_price }}</view>
- </view>
- <view class="three">{{ item.group_people_num }}人团,已拼 <text style="color: #FF0000;">
- {{item.result_sale_num}}</text> 件</view>
- </view>
- <view class="button">去拼团</view>
- </view>
- </view>
- </view>
- </view>
- <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
- </view>
- <!-- 热门推荐 -->
- <view class="hot">
- <view class="hot-top">
- <view class="hot-left">热门推荐</view>
- <view class="hot-body"></view>
- <view class="hot-right">精选好物推荐</view>
- </view>
- <view class="hot-item" v-if="recommendList && recommendList.length > 0">
- <view class="item" v-for="item in recommendList" :key="item.id"
- @click="goProductDetails('/pages/product/goods/goods?id=' + item.id)">
- <image v-if="item && item.cover" :src="item.cover" mode=""></image>
- <view class="hot-introduce" v-if="item && item.title">{{
- item.title
- }}</view>
- <view class="hot-number">
- <view class="hot-large">
- <rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
- </view>
- <view class="hot-small">¥{{ item.max_market_price }}</view>
- </view>
- </view>
- </view>
- <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
- </view>
- <!-- 每周上新 -->
- <view class="new-products">
- <view class="new-top">
- <view class="new-left">每周上新</view>
- <view class="new-line"></view>
- <view class="new-right">新品上市优惠热销</view>
- </view>
- <view class="new-list" v-if="newsList && newsList.length > 0">
- <view class="item" v-for="item in newsList" :key="item.id"
- @click="goProductDetails('/pages/product/goods/goods?id=' + item.id)">
- <image v-if="item && item.cover" :src="item.cover" mode=""></image>
- <view class="list-num">
- <rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
- </view>
- </view>
- </view>
- <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
- </view>
- <!-- 本月热销 -->
- <view class="new-products">
- <view class="new-top">
- <view class="new-left">本月热销</view>
- <view class="new-line"></view>
- <view class="new-right">爆品热卖中</view>
- </view>
- <view v-if="hotList && hotList.length > 0">
- <swiper class="month-list" :indicator-dots="false" :autoplay="false" :display-multiple-items="itemsDis"
- @change="imgActiveFun" circular="true">
- <swiper-item class="item" @click="
- goProductDetails('/pages/product/goods/goods?id=' + item.id)
- " v-for="item in hotList" :key="item.id">
- <image v-if="item && item.cover" :src="item.cover" mode=""></image>
- <view class="list-num">
- <rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
- </view>
- <view class="sold">已售{{ item.result_sale_num }}件</view>
- </swiper-item>
- </swiper>
- <view class="slide-box">
- <view class="dotBox" v-if="hotList.length > 0">
- <!-- 上面给的动态样式 :style="{ marginLeft: ml + 'rpx' }" -->
- <!-- v-for="(v, i) in hotList.slice(0,hotList.length-2)" -->
- <view class="dotBox_item" v-for="(v, i) in hotList" :key="i"
- :class="{ active_dotBox: activeBannerIndex == i }"></view>
- </view>
- </view>
- </view>
- <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
- </view>
- <!-- 本月热销 -->
- <!-- 猜你喜欢 -->
- <view class="guess">
- <view class="guess-top">
- <view class="guess-left">猜你喜欢</view>
- <view class="guess-line"></view>
- <view class="guess-right">智能推荐你感兴趣的优品</view>
- </view>
- <view class="guess-item" v-if="goodsList && goodsList.length > 0">
- <view class="item" @click="goProductDetails('/pages/product/goods/goods?id=' + item.id)"
- v-for="item in goodsList" :key="item.id">
- <image v-if="item && item.cover" :src="item.cover" mode=""></image>
- <view style=" padding-bottom: 40rpx;">
- <view class="name" style="flex: 1;">{{ item.title }}</view>
- <view class="number">
- <view class="number-red">
- <rich-text :nodes="$mUtil.priceBigSmall(item.min_sale_price)"></rich-text>
- </view>
- <view class="number-grey">¥{{ item.max_market_price }}</view>
- </view>
- </view>
- </view>
- </view>
- <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
- <loadMore v-if="goodsList.length > 0" :status="status"></loadMore>
- </view>
- <!-- 猜你喜欢 -->
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- background: ["color1", "color2", "color3"],
- indicatorDots: true,
- autoplay: true,
- interval: 2000,
- duration: 500,
- config: {
- back: false, //false是tolbar页面 是则不写
- title: "商品列表",
- color: "#FFFFFF",
- //背景颜色;参数一:透明度(0-1);参数二:背景颜色(array则为线性渐变,string为单色背景)
- backgroundColor: [1, "#0B844A"],
-
- // rightButton:[{
- // key:'btn1',
- // position:"left",
- // icon:''
- // }],
- rightSlot: true,
- search: {
- disabled:true,
- value: "",
- placeholder: "请输入搜索关键字",
- },
- },
- keyWord: "",
- groupList: [], //团购
- hotList: [], //本月热销
- newsList: [], //每周上新
- recommendList: [], //推荐
- shopBanner: [], //轮播图
- currSeckill: [], //秒杀
- time2: [0, 0, 0, 0], //秒杀倒计时
- goodsList: [], //猜你喜欢
- currTime: null,
- keyList: 0,
- ml: -22,
- itemsDis: 1,
- activeBannerIndex: 0,
- keyList2: 0,
- ml2: -22,
- itemsDis2: 1,
- activeBannerIndex2: 0,
- page: 1,
- status: "more",
- isOver2: false,
- msgCenter: null,
- shopBanner2: [],
- imgUrl: this.$mConfig.staticUrl
- };
- },
- onLoad() {
- this.page = 1;
- this.getAll();
- },
- onShow() {
- this.getmessageNum()
- },
- onPullDownRefresh() {
- this.page = 1;
- // uni.showModal({
- // title:'onPullDownRefresh'
- // })
- this.getAll();
- // uni.stopPullDownRefresh();
- },
- onReachBottom() {
- this.status = "loading";
- this.page++;
- this.guessLike();
- },
- methods: {
- //跳转消息页面
- goToMsg() {
- let token = uni.getStorageSync("apiToken")
- if (!token) {
- uni.navigateTo({
- url: "../register/login"
- })
- } else {
- uni.navigateTo({
- url: "../setup/myMsg"
- })
- }
- },
- searchClick() {
- // console.log("dian");
- uni.navigateTo({
- url: "/pages/research/homepage/search",
- });
- },
- goProductDetails(url) {
- uni.navigateTo({
- url: url,
- });
- },
- changeIndicatorDots(e) {
- this.indicatorDots = !this.indicatorDots;
- },
- changeAutoplay(e) {
- this.autoplay = !this.autoplay;
- },
- intervalChange(e) {
- this.interval = e.detail.value;
- },
- durationChange(e) {
- this.duration = e.detail.value;
- },
- getAll() {
- this.rest();
- // this.getmessageNum();
- this.getBanner();
- this.seckillList();
- this.getgroupList();
- this.recommend();
- this.newWeek();
- this.hotSale();
- this.guessLike();
- },
- /**获得消息数量 */
- getmessageNum() {
- let token = uni.getStorageSync("apiToken")
- if (token) {
- this.$http.get("/private/message/unread-num").then(res => {
- if (res && res.code == 200) {
- this.msgCenter = res.data
- }
- })
- }
- },
- /**轮播图 */
- getBanner() {
- this.$http
- .get(`/ad/ad/getShopAdByAdL/0/pt-banner`, {}, false)
- .then((res) => {
- console.log(res)
- console.log('轮播图')
- uni.stopPullDownRefresh();
- this.loading = false;
- if (res && res.code == 200) {
- this.shopBanner = res.list;
- }
- })
- .catch(err => {
- // console.log(err)
- });
- this.$http
- .get(`/ad/ad/getShopAdByAdL/0/pt-banner2`, {}, false)
- .then((res) => {
- uni.stopPullDownRefresh();
- this.loading = false;
- if (res && res.code == 200) {
- this.shopBanner2 = res.list;
- }
- });
- },
- imgActiveFun(e) {
- this.activeBannerIndex = e.detail.current;
- },
- imgActiveFun2(e) {
- this.activeBannerIndex2 = e.detail.current;
- },
- overDown2() {
- this.isOver2 = true;
- },
- /**限时秒杀 */
- seckillList() {
- this.$http
- .get(
- `/marketing/seckillActivityGoods/flash-sale`, {
- limit: 10,
- page: 1
- },
- false
- )
- .then((res) => {
- if (res && res.code == 200) {
- this.currTime = res.data.start_hour;
- this.currSeckill = res.data.list;
- if (this.currSeckill && res.data.list.length <= 4) {
- this.keyList2 = 1;
- this.itemsDis2 = res.data.list.length;
- }
- if (
- this.currSeckill &&
- res.data.list.length > 4 &&
- res.data.list.length <= 8
- ) {
- this.keyList2 = 2;
- this.ml2 = -45;
- this.itemsDis2 = 3;
- }
- if (
- this.currSeckill &&
- res.data.list.length > 8 &&
- res.data.list.length <= 12
- ) {
- this.keyList2 = 3;
- this.ml2 = -68;
- this.itemsDis2 = 3;
- }
- if (
- this.currSeckill &&
- res.data.list.length > 12 &&
- res.data.list.length <= 16
- ) {
- this.keyList2 = 4;
- this.ml2 = -90;
- this.itemsDis2 = 3;
- }
- if (res.data.finish_time) {
- this.time2 = this.$mUtil
- .countDown(Math.floor(res.data.finish_time / 1000))
- .split(":")
- .map((val) => Number(val));
- }
- }
- });
- },
- /**团购 */
- getgroupList() {
- this.$http
- .get(
- `/groupbuy/activitygoods/will-you-spell`, {
- limit: 10,
- page: 1
- },
- false
- )
- .then((res) => {
- if (res && res.code == 200) {
- this.groupList = res.list;
- }
- });
- },
- /**热门推荐 */
- recommend() {
- this.$http
- .get(`/goods/new`, {
- limit: 6,
- type: "hot"
- }, false)
- .then((res) => {
- if (res && res.code == 200) {
- this.recommendList = res.list;
- }
- });
- },
- /**每周上新 */
- newWeek() {
- this.$http.get(`/goods/new`, {
- limit: 16
- }, false).then((res) => {
- if (res && res.code == 200) {
- this.newsList = res.list;
- }
- });
- },
- /**本月热销 */
- hotSale() {
- this.$http
- .get(`/goods/month`, {
- limit: 12,
- mix_num: 3
- }, false)
- .then((res) => {
- if (res && res.code == 200) {
- this.hotList = res.list;
- if (res.list.length <= 3) {
- this.keyList = 1;
- this.itemsDis = res.list.length;
- }
- if (res.list.length > 3 && res.list.length <= 6) {
- this.keyList = 2;
- this.ml = -45;
- this.itemsDis = 3;
- }
- if (res.list.length > 6 && res.list.length <= 9) {
- this.keyList = 3;
- this.ml = -68;
- this.itemsDis = 3;
- }
- if (res.list.length > 9 && res.list.length <= 12) {
- this.keyList = 4;
- this.ml = -90;
- this.itemsDis = 3;
- }
- }
- });
- },
- /**猜你喜欢 */
- guessLike() {
- this.keyWord = uni.getStorageSync("history") ? uni.getStorageSync("history").join(",") : ''
- this.$http
- .get(
- `/goods/smart`, {
- page: this.page,
- limit: 6,
- keywords: this.keyWord,
- },
- false
- )
- .then((res) => {
- if (res && res.code == 200) {
- this.goodsList = this.page == 1 ? res.page.list : this.goodsList.concat(res.page.list);
- if (res.page.totalPage <= res.page.currPage) {
- this.status = "noMore";
- } else {
- this.status = "more";
- }
- }
- });
- },
- /**轮播图跳转 */
- imgLink(type, id, url, shopid) {
- if (type == "goods") {
- uni.navigateTo({
- url: "/pages/product/goods/goods?id=" + id + "&shopid=" + shopid,
- });
- } else if (type == "service") {
- uni.navigateTo({
- url: "/pages/product/goods/serviceGood?id=" + id
- });
- } else if (type == "url") {
- if(/^http/.test(url)){
- uni.navigateTo({
- url: "/pages/index/webView?linkUrl=" + url,
- });ef
- }else{
- uni.navigateTo({
- url
- });
- }
- }
- },
- goDetail(url, isNeedLogin) {
- if ((isNeedLogin && uni.getStorageSync("apiToken") == "") || null) {
- this.$mUtil.toast("请先登录");
- return false;
- }
- uni.navigateTo({
- url: url,
- });
- },
- /**重置数据*/
- rest() {
- this.goodsList = [];
- this.currSeckill = [];
- this.shopBanner = [];
- this.recommendList = [];
- this.newsList = [];
- this.hotList = [];
- this.groupList = [];
- },
- },
- };
- </script>
- <style scoped lang="scss">
- .swiper {
- /deep/ .uni-swiper-dot {
- width: 40rpx !important;
- height: 8rpx;
- border-radius: 5rpx !important;
- background-color: #ffffff !important;
- opacity: 0.5;
- }
- /deep/ .uni-swiper-dot-active {
- background-color: #ffffff !important;
- opacity: 1;
- }
- }
- /deep/.hx-navbar__content__main_search_hxicon {
- span {
- font-size: 30rpx;
- }
- }
- /deep/.uni-input-placeholder {
- background-color: #4A705D;
- color: #193E2C !important;
- font-size: 22rpx;
- }
- /deep/.hx-navbar__content__main_search_input {
- background-color: #4A705E;
- }
- .bannersize {
- display: block;
- border-radius: 20rpx;
- overflow: hidden;
- width: 100%;
- height: 340rpx;
- }
- .guess {
- margin: 0 30rpx;
- .guess-item {
- display: flex;
- // justify-content: space-around;
- flex-wrap: wrap;
- .item {
- margin-bottom: 36rpx;
- border-radius: 18rpx;
- background-color: #ffffff;
- border-radius: 18rpx;
- overflow: hidden;
- display: flex;
- flex-direction:column ;
- justify-content: space-between;
-
- image {
- width: 336rpx;
- height: 336rpx;
- }
- .name {
- margin: 6rpx 20rpx;
- width: 296rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- word-wrap: break-word;
- word-break: break-all;
- white-space: normal !important;
- }
- .number {
- display: flex;
- align-items: flex-end;
- // padding-bottom: 40rpx;
- margin: 10rpx 20rpx 0 20rpx;
-
- .number-red {
- color: #ed3d07;
- font-size: 36rpx;
- font-weight: 500;
- text {
- font-size: 36rpx;
- font-weight: Bold;
- }
- }
- .number-grey {
- color: #999999;
- font-size: 22rpx;
- font-weight: 400;
- text-decoration: line-through;
- margin-left: 16rpx;
- }
- }
- }
- .item:nth-child(2n){
- margin-left: 18rpx;
- }
- }
- .guess-top {
- display: flex;
- align-items: center;
- margin-bottom: 24rpx;
- .guess-left {
- font-size: 36rpx;
- color: #1a1a1a;
- font-weight: Bold;
- line-height: 30rpx;
- }
- .guess-line {
- width: 1rpx;
- height: 32rpx;
- background-color: #707070;
- margin: 0 16rpx;
- }
- .guess-right {
- font-size: 24rpx;
- color: #666666;
- font-weight: Regular;
- line-height: 24rpx;
- }
- }
- }
- .new-products {
- margin: 50rpx 30rpx;
- .new-list {
- display: flex;
- overflow: scroll;
- white-space: nowrap;
- .item {
- margin-right: 20rpx;
- margin-top: 28rpx;
- margin-bottom: 28rpx;
- text-align: center;
- image {
- border: 1rpx solid #e6e6e6;
- width: 172rpx;
- height: 172rpx;
- }
- .list-num {
- margin-top: 16rpx;
- font-size: 36rpx;
- line-height: 24rpx;
- color: #ff0000;
- font-weight: Bold;
- text {
- font-size: 32rpx;
- }
- }
- }
- }
- .montn-scroll {
- margin: 0 auto;
- border-radius: 6rpx;
- width: 124rpx;
- height: 14rpx;
- background-color: #dddddd;
- border-radius: 7rpx;
- text-align: center;
- .montn-red {
- width: 50rpx;
- border-radius: 6rpx;
- height: 14rpx;
- background-color: #ff0000;
- }
- }
- .month-list {
- // display: flex;
- // overflow: scroll;
- // white-space: nowrap;
- position: relative;
- padding-bottom: 20rpx;
- height: 350rpx;
- /deep/ uni-swiper {
- height: 350rpx;
- }
- .item {
- margin: 28rpx 20rpx 28rpx 0;
- text-align: center;
- height: 350rpx;
- image {
- width: 216rpx;
- height: 216rpx;
- border-radius: 16rpx;
- }
- .list-num {
- margin-top: 16rpx;
- font-size: 36rpx;
- line-height: 24rpx;
- color: #ff0000;
- font-weight: bold;
- text {
- font-size: 32rpx;
- }
- }
- .sold {
- font-size: 22rpx;
- font-weight: Medium;
- line-height: 24rpx;
- color: #999999;
- margin-top: 8rpx;
- }
- }
- }
- .new-top {
- display: flex;
- align-items: center;
- .new-left {
- font-size: 36rpx;
- color: #1a1a1a;
- font-weight: Bold;
- line-height: 30rpx;
- }
- .new-line {
- width: 1rpx;
- height: 33rpx;
- background-color: #707070;
- margin: 0 16rpx;
- }
- .new-right {
- font-size: 24rpx;
- color: #666666;
- font-weight: Regular;
- line-height: 24rpx;
- }
- }
- }
- .slide-box {
- display: flex;
- justify-content: center;
- }
- .dotBox {
- // position: absolute;
- // bottom: 0rpx;
- // left: 50%;
- // margin: 0 auto;
- height: 14rpx;
- overflow: hidden;
- border-radius: 14rpx;
- background-color: #ccc;
- display: flex;
- justify-content: center;
- .dotBox_item {
- width: 45rpx;
- height: 14rpx;
- border-radius: 2rpx;
- background-color: #ccc;
- transition: all 0.5s;
- }
- .active_dotBox {
- width: 45rpx;
- background: rgba(254, 70, 3, 1);
- transition: all 0.5s;
- }
- }
- .hot {
- margin: 0 30rpx;
- .hot-item {
- display: flex;
- overflow: scroll;
- white-space: nowrap;
- .hot-number {
- display: flex;
- align-items: flex-end;
- margin-top: 10rpx;
- }
- .hot-large {
- color: #ff0000;
- font-size: 36rpx;
- font-weight: Bold;
- line-height: 24rpx;
- text {
- font-size: 36rpx;
- margin-left: 10rpx;
- }
- }
- .hot-small {
- font-size: 22rpx;
- font-weight: Medium;
- line-height: 24rpx;
- color: #cccccc;
- margin-left: 16rpx;
- }
- .hot-introduce {
- overflow: hidden;
- word-break: break-all;
- margin-top: 24rpx;
- // width: 240rpx;
- font-size: 24rpx;
- font-weight: Regular;
- line-height: 34rpx;
- color: #333333;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- word-wrap: break-word;
- white-space: normal !important;
- }
- .item {
- padding: 20rpx;
- background-color: #ffffff;
- border-radius: 16rpx;
- margin-right: 20rpx;
- }
- display: flex;
- margin-top: 27rpx;
- image {
- width: 252rpx;
- height: 252rpx;
- border-radius: 16rpx;
- }
- }
- .hot-top {
- display: flex;
- align-items: center;
- .hot-left {
- font-size: 36rpx;
- font-weight: Bold;
- color: #1a1a1a;
- line-height: 30rpx;
- }
- .hot-body {
- width: 1rpx;
- height: 32rpx;
- background-color: #707070;
- margin: 0 16rpx 0 14rpx;
- }
- .hot-right {
- font-size: 24rpx;
- font-weight: Regular;
- line-height: 24rpx;
- color: #666666;
- }
- }
- }
- .middle:last-child {
- border: none;
- }
- .middle {
- display: flex;
- border-bottom: 1rpx solid #e6e6e6;
- padding-bottom: 40rpx;
- padding-top: 42rpx;
- .middle-left {
- margin-right: 20rpx;
- image {
- width: 226rpx;
- height: 226rpx;
- border-radius: 10rpx;
- }
- }
- .middle-right {
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- margin-top: 10rpx;
- .middle-title {
- font-size: 28rpx;
- margin-top: 10rpx;
- color: #181818;
- font-weight: 400;
- line-height: 36rpx;
- }
- .division {
- display: flex;
- // margin-top: 60rpx;
- width: 100%;
- padding-bottom: 10rpx;
- justify-content: space-between;
- }
- .middle-num {
- flex: 1;
- .contain {
- display: flex;
- align-items: flex-end;
- }
- .three {
- font-size: 24rpx;
- font-weight: Regular;
- color: #333333;
- line-height: 24rpx;
- margin-top: 8rpx;
- }
- .large {
- color: #ff0000;
- font-size: 36rpx;
- font-weight: Bold;
- line-height: 24rpx;
- text {
- font-size: 36rpx;
- }
- }
- .small {
- margin-left: 16rpx;
- font-size: 22rpx;
- font-weight: 500;
- color: #cccccc;
- line-height: 24rpx;
- text-decoration: line-through;
- }
- }
- .button {
- padding: 10rpx 25rpx 10rpx 25rpx;
- color: #d5c49b;
- font-size: 28rpx;
- font-weight: Medium;
- background-color: #0B844A;
- border-radius: 32rpx;
- }
- }
- }
- .group-work {
- margin: 50rpx 30rpx;
- border-radius: 16rpx;
- background-color: #ffffff;
- padding: 30rpx;
- .work-top {
- padding-bottom: 20rpx;
- margin-bottom: 10rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-bottom: 1rpx solid #e6e6e6;
- .top-left {
- font-size: 36rpx;
- font-weight: Bold;
- color: #1a1a1a;
- line-height: 30rpx;
- }
- .top-right {
-
- color: #333333;
- font-size: 24rpx;
- font-weight: Regular;
- .iconfont {
- color: #666666;
- }
- }
- }
- }
- .seckill {
- margin: 50rpx 30rpx;
- .seckill-item {
- border-radius: 16rpx;
- .scroll {
- margin: 26rpx auto 26rpx auto;
- width: 124rpx;
- height: 14rpx;
- background-color: #ededed;
- border-radius: 8rpx;
- .scroll-red {
- width: 50rpx;
- height: 14rpx;
- background-color: red;
- border-radius: 8rpx;
- }
- }
- background-color: #ffffff;
- padding: 0 28rpx 26rpx 28rpx;
- .option {
- // display: flex;
- position: relative;
- // padding: 12rpx 20rpx;
- margin-top: 20rpx;
- /deep/ .uni-swiper-slide-frame {
- width: 26% !important;
- }
- .option-item {
- margin-right: 22rpx;
- image {
- width: 140rpx;
- height: 140rpx;
- }
- .number {
- margin-top: 4rpx;
- text-align: center;
- font-size: 36rpx;
- font-weight: Bold;
- line-height: 24rpx;
- color: #333333;
- text {
- font-size: 28rpx;
- font-weight: Medium;
- }
- }
- }
- }
- .seckill-top {
- padding: 24rpx 0;
- display: flex;
- align-items: center;
- border-bottom: 1rpx solid #e6e6e6;
- .left {
- font-size: 36rpx;
- font-weight: Bold;
- color: #1a1a1a;
- margin-right: 14rpx;
- }
- .line {
- width: 1rpx;
- height: 32rpx;
- background-color: #707070;
- }
- .time {
- margin-left: 16rpx;
- color: #666666;
- font-size: 24rpx;
- font-weight: Regular;
- }
- .reciprocal {
- color: #ffffff;
- padding: 0 14rpx;
- background-color: #ff0000;
- font-size: 24rpx;
- font-weight: Bold;
- border-radius: 16rpx;
- margin-left: 30rpx;
- }
- }
- }
- }
- .advertisement {
- margin: 50rpx 30rpx;
- image {
- width: 690rpx;
- height: 156rpx;
- border-radius: 28rpx;
- }
- }
- .list {
- margin: 44rpx 30rpx;
- display: flex;
- justify-content: space-between;
- .item {
- text-align: center;
- image {
- width: 100rpx;
- height: 100rpx;
- }
- }
- }
- .item-red {
- background: #f76260;
- color: #fff;
- }
- .item-green {
- background: #09bb07;
- color: #fff;
- }
- .item-blue {
- background: #007aff;
- color: #fff;
- }
- .swiper {
- margin: 30rpx;
- }
- .index {
- position: relative;
- background-color: #eeeeee;
- overflow-x: hidden;
- .top {
- position: absolute;
- top: 0;
- left: -13%;
- width: 126%;
- overflow-x: hidden;
- height: 400rpx;
- border-radius: 0 0 50% 50%;
- background-color: rgba(0, 50, 30, 1);
- }
- }
- .iconfont {
- position: relative;
- }
- .num {
- position: absolute;
- top: -20rpx;
- left: -20rpx;
- background-color: #ff0000;
- padding: 2rpx 10rpx;
- border-radius: 14rpx;
- font-size: 20rpx;
- font-weight: 400;
- color: #ffffff;
- }
- .uni-margin-wrap {
- width: 690rpx;
- }
- .swiper {
- height: 340rpx;
- }
- .swiper-item {
- display: block;
- height: 300rpx;
- line-height: 300rpx;
- text-align: center;
- border-radius: 20rpx;
- }
- .swiper-list {
- margin-top: 40rpx;
- margin-bottom: 0;
- }
- .uni-common-mt {
- margin-top: 60rpx;
- position: relative;
- }
- .info {
- position: absolute;
- right: 20rpx;
- }
- .uni-padding-wrap {
- width: 550rpx;
- padding: 0 100rpx;
- }
- </style>
|