18577375184
/
jimei-hudong-h5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
吉媒互动平台前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
12 Commits
1 Branch
0 Tags
4.8 MiB
 
 
 
 
 
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
jimei-hudong-h5/pages/index/index - 副本 (2).vue

1028 lines
26 KiB
Raw Permalink Blame History

<template>
<view style="width: 100%;overflow-x: hidden;background-color: #F8EEF7;height: 200vh;" v-if="!isLoading">
<gui-page :customFooter="true" iphoneXButtomStyle="background:#F8EEF7;"
:footerSets="{height:120, zIndex:100, bg:'none'}">
<view slot="gBody" :style="appThemeStyle" style="width: 100%;overflow-x: hidden;">
<view style="width: 100%;overflow-x: hidden">
<view>
<image src="../../static/3334.png" style="width: 100%;z-index: 0;position: absolute;">
</image>
</view>
<view style="height: 40rpx;"></view>
<view style="font-size: 35rpx;z-index: 11;position: absolute;">
<view style="display: flex;width: 100%;margin-bottom: 20rpx;">
<view
style="color: #FFF; width: 20%;display:flex;justify-content: center;align-items: center;">
<view style="display: flex;width:100%;padding-left: 10rpx;" @click="onLocate">
<u-icon name="map"></u-icon>
<text class="oneline-hide" style="font-size: 28rpx;">{{city}}</text>
</view>
</view>
<view style="padding: 10rpx 20rpx;position: relative;width:80%;" @click="sousuo">
<gui-search placeholder="请输入关键词搜索" @inputting="inputting" @confirm="confirm" disabled
@tapme="sousuo"></gui-search>
</view>
</view>
<view class="diy-navBar" style="color: #666666;">
<view class="data-list avg-sm-5">
<view class="item-nav" v-for="(item,index) in shopList"
@click="handleTargetExtract(item.shop_id)">
<view class="nav-to">
<view class="item-image">
<image class="image" :src="item.logo_url"
style="border: 5rpx solid #633981;">
</image>
</view>
<view class="item-text oneline-hide">{{item.shop_name}}</view>
</view>
</view>
</view>
</view>
<Page :items="items" />
<view v-if="!isLoading">
<view style="padding: 20rpx 0;background-color: #F8EEF7;">
<gui-switch-navigation activeLineBg="linear-gradient(to right, #9E1A91, #4D0868)"
activeLineWidth="80rpx" padding="30rpx" :size="0" textAlign="center"
activeDirection="center"
:items="[{id:0,name:'推荐'},{id:1,name:'周末活动'},{id:2,name:'附近商品'}]"
@change="navchange"></gui-switch-navigation>
</view>
<!-- <view style="padding: 20rpx 0;background-color: #F8EEF7;" v-if="!isAuthor">
<gui-switch-navigation activeLineBg="linear-gradient(to right, #9E1A91, #4D0868)"
activeLineWidth="80rpx" padding="30rpx" :size="0" textAlign="center"
activeDirection="center" :items="[{id:0,name:'推荐'},{id:1,name:'周末活动'}]"
@change="navchange"></gui-switch-navigation>
</view> -->
</view>
<u-waterfall v-model="flowList" ref="uWaterfall">
<template v-slot:left="{leftList}">
<view class="demo-warter" v-for="(item, index) in leftList" :key="index"
@click="onTargetDetail(item.goods_id)">
<view v-if="item.is_gg">
<image :src="item.images"
style="width: 330rpx;height: 330rpx;border-radius: 10rpx;"
mode="aspectFill"></image>
<view
style=" position: absolute;left: 0;top: 20rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
<image src="../../static/zx.png" style="height: 40rpx;" mode="heightFix">
</image>
</view>
</view>
<view v-else>
<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
<!-- <u-lazy-load threshold="-450" border-radius="10" :image="item.goods_image" style="width: 340rpx;height: 227rpx;"
:index="index"></u-lazy-load> -->
<image :src="item.goods_image"
style="width: 330rpx;height: 330rpx;border-radius: 10rpx;"
mode="aspectFill"></image>
<block v-if="inArray(item.goods_id,newIds)&&inArray(item.goods_id,hotIds)">
<view
style="position: absolute;left: 0;top: 20rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
<image src="../../static/zx.png" style="height: 40rpx;"
mode="heightFix">
</image>
</view>
<view
style="position: absolute;left: 0;top: 70rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
<image src="../../static/hot.png" style="height: 40rpx;"
mode="heightFix">
</image>
</view>
</block>
<block v-if="inArray(item.goods_id,newIds)&&!inArray(item.goods_id,hotIds)">
<view
style="position: absolute;left: 0;top: 20rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
<image src="../../static/zx.png" style="height: 40rpx;"
mode="heightFix">
</image>
</view>
</block>
<block v-if="!inArray(item.goods_id,newIds)&&inArray(item.goods_id,hotIds)">
<view
style="position: absolute;left: 0;top: 20rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
<image src="../../static/hot.png" style="height: 40rpx;"
mode="heightFix">
</image>
</view>
</block>
<view class="demo-title twoline-hide" style="font-weight: bold;">
{{item.goods_name}}
</view>
<view class="desc_footer">
<text class="price_x">¥{{ item.goods_price_min }}</text>
<text class="price_y col-9"
v-if=" item.line_price_min > 0">¥{{ item.line_price_min }}</text>
</view>
<view
class="demo-shop gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between">
<text>已售{{ item.goods_sales }}件</text>
<text v-if="item.distance_unit">{{item.distance_unit}}</text>
</view>
<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close"
@click="remove(item.id)"></u-icon> -->
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="demo-warter" v-for="(item, index) in rightList" :key="index"
@click="onTargetDetail(item.goods_id)">
<view v-if="item.is_gg">
<image :src="item.images"
style="width: 330rpx;height: 330rpx;border-radius: 10rpx;"
mode="aspectFill"></image>
<view
style="position: absolute;left: 0;top: 20rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
<image src="../../static/zx.png" style="height: 40rpx;" mode="heightFix">
</image>
</view>
</view>
<view v-else>
<image :src="item.goods_image"
style="width: 330rpx;height: 330rpx;border-radius: 10rpx;"
mode="aspectFill"></image>
<block v-if="inArray(item.goods_id,newIds)&&inArray(item.goods_id,hotIds)">
<view
style="position: absolute;left: 0;top: 20rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
<image src="../../static/zx.png" style="height: 40rpx;"
mode="heightFix">
</image>
</view>
<view
style="position: absolute;left: 0;top: 70rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
<image src="../../static/hot.png" style="height: 40rpx;"
mode="heightFix">
</image>
</view>
</block>
<block v-if="inArray(item.goods_id,newIds)&&!inArray(item.goods_id,hotIds)">
<view
style="position: absolute;left: 0;top: 20rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
<image src="../../static/zx.png" style="height: 40rpx;"
mode="heightFix">
</image>
</view>
</block>
<block v-if="!inArray(item.goods_id,newIds)&&inArray(item.goods_id,hotIds)">
<view
style="position: absolute;left: 0;top: 20rpx;color: #fff;font-size: 20rpx;padding: 5rpx 10rpx;">
<image src="../../static/hot.png" style="height: 40rpx;"
mode="heightFix">
</image>
</view>
</block>
<view class="demo-title twoline-hide" style="font-weight: bold;">
{{item.goods_name}}
</view>
<view class="desc_footer">
<text class="price_x">¥{{ item.goods_price_min }}</text>
<text class="price_y col-9"
v-if=" item.line_price_min > 0">¥{{ item.line_price_min }}</text>
</view>
<view
class="demo-shop gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between">
<text>已售{{ item.goods_sales }}件</text>
<text v-if="item.distance_unit">{{item.distance_unit}}</text>
</view>
</view>
<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close"
@click="remove(item.id)"></u-icon> -->
</view>
</template>
</u-waterfall>
<view style="position: fixed;bottom: 200rpx;right: 20rpx;" v-if="top > 500">
<text @click="dingbu" class=" gui-icons"
style="background: linear-gradient(to top, #4D0868, #9E1A91);color: #fff;padding: 20rpx;border-radius: 50%;">&#xe637;</text>
</view>
<view v-if="!isAuthor" class="widget-location dis-flex flex-x-center flex-y-center"
@click="onAuthorize()">
<text class="iconfont icon-locate"></text>
</view>
<view style="height: 180rpx;"></view>
</view>
</view>
<gui-popup ref="guipopup1" :canCloseByShade="false">
<view style="background-color: #fff;border-radius: 20rpx;">
<view style="width: 580rpx;height: 580rpx;">
<image :src="store.image_url"
style="width: 580rpx;height: 580rpx;border-top-left-radius:20rpx ;border-top-right-radius:20rpx ;">
</image>
</view>
<view v-if="store.goods_id > 0" @click="onTargetDetail(store.goods_id)"
style="width: 580rpx;height: 200rpx;background: rgba(187,52,238,0.2);display: flex;justify-content: center;align-items: center;">
<text
style="width: 300rpx;padding: 20rpx 0;background-color: #54125f;background: linear-gradient(to top, #4D0868, #9E1A91);color: #fff;text-align: center;border-radius: 40rpx;">查看详情</text>
</view>
</view>
<view style="text-align: center;color: #fff;font-size: 60rpx;margin-top: 20rpx;">
<text class=" gui-icons" @click="close1">&#xe78a;</text>
</view>
</gui-popup>
</view>
<view slot="gFooter" class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-end"
style="background: linear-gradient(to top, #0E001F, #7B0373 );padding-bottom: 100rpx;">
<view class="gui-footer-icon-buttons" @tap="navChang(0)"
style="padding-bottom: 30rpx;;text-align: center;">
<view class="tab">
<image src="../../static/sys.png" mode="widthFix"></image>
</view>
<view style="color: #B32ABE;">
首页
</view>
</view>
<view class="gui-footer-icon-buttons" @tap="navChang(1)"
style="padding-bottom: 30rpx;;text-align: center;">
<view class="tab">
<image src="../../static/dd.png" mode="widthFix"></image>
</view>
<view>
订单
</view>
</view>
<view class="gui-footer-icon-buttons" @tap="navChang(2)"
style="padding-bottom: 30rpx;;text-align: center;">
<view class="tab">
<image src="../../static/wd.png" mode="widthFix"></image>
</view>
<view>
我的
</view>
</view>
</view>
</gui-page>
<shortcut bottom="120rpx" />
</view>
</template>
<script>
import store from '@/store'
import Shortcut from '@/components/shortcut'
var graceJS = require('@/GraceUI5/js/grace.js');
import {
inArray
} from '@/utils/util'
import {
setCartTabBadge
} from '@/core/app'
import * as Api from '@/api/page'
import Page from '@/components/page'
import * as ShopApi from '@/api/shop'
import * as GoodsApi from '@/api/goods'
import * as SettingApi from '@/api/setting'
import {
ACCESS_TOKEN,
USER_ID
} from '@/store/mutation-types'
import storage from '@/utils/storage'
import * as LoginApi from '@/api/login'
// 登陆成功后执行
const loginSuccess = (commit, {
token,
userId
}) => {
// 过期时间30天
const expiryTime = 30 * 86400
// 保存tokne和userId到缓存
storage.set(USER_ID, userId, expiryTime)
storage.set(ACCESS_TOKEN, token, expiryTime)
// 记录到store全局变量
commit('SET_TOKEN', token)
commit('SET_USER_ID', userId)
}
const App = getApp()
export default {
components: {
Page,
Shortcut
},
data() {
return {
leftList: [],
rightList: [],
newIds: [],
hotIds: [],
inArray,
top: 0,
// 页面参数
options: {},
// 页面属性
page: {},
// 页面元素
items: [],
// 门店列表
shopList: [],
face: "https://images.unsplash.com/photo-1661956601031-4cf09efadfce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxMzF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=100&q=90",
list: [],
flowList: [],
loadStatus: 'loadmore',
// 是否授权了定位权限
isAuthor: true,
isLoading: true,
city: '南宁市',
is_locate: 0,
is_pas: 0,
store: '',
navCurrent: 0,
zxIndex: 0,
is_kind: 0,
is_dingwei: 0,
page_num: 1,
latitude: '',
longitude: ''
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
let _this = this
// this.getSetting()
// 当前页面参数
_this.options = options
console.log(options)
if (options.id) {
uni.getStorageSync('t_id', options.id)
uni.getStorageSync('t_token', options.token)
_this.getUserInfo(options.id, options.token)
}
_this.getNews()
_this.getHots()
console.log(585)
SettingApi.data()
.then(result => {
_this.store = result.data.setting.store
console.log(_this.store.logo_image_id)
var ad_index = storage.get('index_ad')
if (_this.store.logo_image_id > 0 && !ad_index) {
graceJS.getRefs('guipopup1', _this, 0, (guipopupref) => {
guipopupref.open();
});
}
_this.getPageData();
_this.getShopList();
//_this.getDWList();
//_this.getGoodsList()
_this.getLocation(res => {
_this.flowList = []
_this.getDWList(res.longitude, res.latitude);
//_this.getGoodsList(res.longitude, res.latitude)
})
// 模拟数据加载
setTimeout(() => {
this.isLoading = false;
}, 500)
})
},
onShow() {
// var token = storage.get(ACCESS_TOKEN)
// if (!token) {
// // 加载页面数据
// var id = this.options.id ? this.options.id : uni.getStorageSync('t_id')
// var t_token = this.options.token ? this.options.token : uni.getStorageSync('t_token')
// this.getUserInfo(id, t_token)
// }
this.city = uni.getStorageSync('city')
var is_locate = uni.getStorageSync('is_locate')
console.log(is_locate)
if (is_locate == 1) {
this.page_num = 1
this.is_pas = 0
this.flowList = []
this.$refs.uWaterfall.clear();
this.getGoodsList()
}
},
onReachBottom() {
this.loadStatus = 'loading';
this.page_num = this.page_num + 1
this.getGoodsList()
// 模拟数据加载
setTimeout(() => {
this.addRandomData();
this.loadStatus = 'loadmore';
}, 1000)
},
onPageScroll: function(e) {
this.top = e.scrollTop;
console.log(e.scrollTop)
},
methods: {
getNews() {
const app = this
const param = {
categoryId: app.options.categoryId || 0,
}
GoodsApi.newIds(param)
.then(result => {
app.newIds = result.data.newIds
})
},
getHots() {
const app = this
const param = {
categoryId: app.options.categoryId || 0,
}
GoodsApi.hotIds(param)
.then(result => {
app.hotIds = result.data.hotIds
})
},
navchange(e) {
let _this = this
_this.page_num = 1
console.log(e)
//_this.is_kind = e
_this.is_pas = e
_this.flowList = []
_this.$refs.uWaterfall.clear();
_this.getGoodsList()
},
dingbu() {
uni.pageScrollTo({
scrollTop: 0,
duration: 300 // 滚动到顶部的动画时长，单位为毫秒
});
},
sousuo() {
uni.navigateTo({
url: '/pages/search/index'
})
},
navChang: function(index) {
if (index == 1) {
uni.navigateTo({
url: '/pages/order/index'
})
}
if (index == 2) {
uni.navigateTo({
url: '/pages/user/index'
})
}
},
getUserInfo(id, token) {
let _this = this
Api.getUserInfo(id, token)
.then(result => {
console.log(result)
store.dispatch('Login', {
mobile: result.data.mobile,
})
.then(result => {
// 显示登录成功
// app.$toast(result.message)
// // 跳转回原页面
// setTimeout(() => {
// app.onNavigateBack(1)
// }, 2000)
})
.catch(err => {
})
.finally(() => app.isLoading = false)
})
},
getSetting() {
let _this = this
SettingApi.data()
.then(result => {
_this.store = result.data.setting.store
console.log(_this.store.logo_image_id)
if (_this.store.logo_image_id > 0) {
graceJS.getRefs('guipopup1', _this, 0, (guipopupref) => {
guipopupref.open();
});
}
})
},
open1: function() {
this.$refs.guipopup1.open();
},
close1: function() {
// 过期时间30天
const expiryTime = 86400
// 缓存
storage.set('index_ad', 1, expiryTime)
this.$refs.guipopup1.close();
},
getDWList(longitude, latitude) {
const app = this
Api.LonandLat({
longitude,
latitude
})
.then(result => {
this.city = result.data.ads.city
this.is_dingwei = 1
this.longitude = longitude
this.latitude = latitude
uni.setStorageSync('city', result.data.ads.city);
this.getGoodsList()
})
},
// 获取列表
getGoodsList() {
const app = this
GoodsApi.sylist({
city: app.city,
is_kind: app.is_kind,
is_pas: app.is_pas,
is_dingwei: app.is_dingwei,
longitude: app.longitude,
latitude: app.latitude,
page: app.page_num
})
.then(result => {
app.list = result.data.list.data
app.addRandomData();
})
},
getLocation(callback) {
const app = this
uni.getLocation({
type: 'wgs84',
success: callback,
fail(res) {
app.$toast('获取定位失败，请点击右下角按钮重新尝试定位')
app.isAuthor = false
}
})
},
onAuthorize() {
const app = this
// #ifdef MP
uni.openSetting({
success(res) {
if (res.authSetting['scope.userLocation']) {
app.isAuthor = true
setTimeout(() => {
// 获取用户坐标
app.getLocation((res) => {
app.getGoodsList(res.longitude, res.latitude)
app.getDWList(res.longitude, res.latitude);
})
}, 1000)
}
}
})
// #endif
// #ifdef H5
console.log('222')
// 获取用户坐标
app.getLocation((res) => {
app.getShopList(res.longitude, res.latitude)
app.getDWList(res.longitude, res.latitude);
})
// #endif
},
onTargetDetail(goodsId) {
console.log(goodsId)
if (goodsId > 0) {
// 过期时间1天
const expiryTime = 86400
// 缓存
storage.set('index_ad', 1, expiryTime)
this.$navTo('pages/goods/detail', {
goodsId
})
}
},
addRandomData() {
if (this.is_pas == 0) {
console.log(this.store)
if (this.store.onegg_id > 0) {
this.flowList.push({
images: this.store.onegg.preview_url,
url: '',
is_gg: true,
goods_id: this.store.onegg_goods_id,
});
}
if (this.store.twogg_id > 0) {
this.flowList.push({
images: this.store.twogg.preview_url,
url: '',
is_gg: true,
goods_id: this.store.twogg_goods_id,
});
}
if (this.store.threegg_id > 0) {
this.flowList.push({
images: this.store.threegg.preview_url,
url: '',
is_gg: true,
goods_id: this.store.threegg_goods_id,
});
}
this.is_pas = 2
}
// for (let i = 0; i < this.list.length; i++) {
// let index = this.$u.random(0, this.list.length - 1);
// // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
// let item = this.list[index]
// item.id = this.$u.guid();
// this.flowList.push(item);
// }
for (let i = 0; i < this.list.length; i++) {
let index = this.$u.random(0, this.list.length - 1);
// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
let item = JSON.parse(JSON.stringify(this.list[index]))
item.id = this.$u.guid();
this.flowList.push(item);
}
},
handleTargetExtract(shopId) {
this.$navTo('pages/shop/detail', {
shopId
})
},
getShopList() {
const app = this
ShopApi.list()
.then(result => app.shopList = result.data.list)
},
onLocate() {
this.is_locate = 0
uni.setStorageSync('is_locate', '')
uni.navigateTo({
url: '/pages/locate/index'
})
},
/**
* 加载页面数据
* @param {Object} callback
*/
getPageData(callback) {
const app = this
const pageId = app.options.pageId || 0
Api.detail(pageId)
.then(result => {
// 设置页面数据
const {
data: {
pageData
}
} = result
app.page = pageData.page
app.items = pageData.items
// 设置顶部导航栏栏
app.setPageBar();
})
.finally(() => callback && callback())
},
/**
* 设置顶部导航栏
*/
setPageBar() {
const {
page
} = this
// 设置页面标题
uni.setNavigationBarTitle({
title: page.params.title
});
// 设置navbar标题、颜色
uni.setNavigationBarColor({
frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
backgroundColor: page.style.titleBackgroundColor
})
},
},
/**
* 下拉刷新
*/
onPullDownRefresh() {
// 获取首页数据
this.getPageData(() => {
uni.stopPullDownRefresh()
})
},
/**
* 分享当前页面
*/
onShareAppMessage() {
const app = this
const {
page
} = app
return {
title: page.params.share_title,
path: "/pages/index/index?" + app.$getShareUrlParams()
}
},
/**
* 分享到朋友圈
* 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
* https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
*/
onShareTimeline() {
const app = this
const {
page
} = app
return {
title: page.params.share_title,
path: "/pages/index/index?" + app.$getShareUrlParams()
}
}
}
</script>
<style>
page {
background: #F8EEF7 !important;
overflow-x: hidden;
}
</style>
<style lang="scss" scoped>
.oneline-hide {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.diy-navBar .data-list::after {
clear: both;
content: " ";
display: table;
}
.item-nav {
float: left;
margin: 10px 0;
text-align: center;
.item-text {
font-size: 26rpx;
}
.item-image {
margin-bottom: 4px;
font-size: 0;
}
.item-image .image {
width: 88rpx;
height: 88rpx;
border-radius: 50%;
}
}
/* 分列布局 */
.diy-navBar .avg-sm-3>.item-nav {
width: 33.33333333%;
}
.diy-navBar .avg-sm-4>.item-nav {
width: 25%;
}
.diy-navBar .avg-sm-5>.item-nav {
width: 20%;
}
</style>
<style lang="scss" scoped>
.col-9 {
color: #999;
}
.price_y {
text-decoration: line-through;
font-size: 24rpx;
}
.price_x {
margin-right: 16rpx;
color: $main-bg;
font-size: 34rpx;
line-height: 50rpx;
}
.demo-warter {
border-radius: 8px;
margin: 5px;
background-color: #ffffff;
padding: 8px;
position: relative;
}
.u-close {
position: absolute;
top: 32rpx;
right: 32rpx;
}
.demo-image {
width: 100%;
border-radius: 4px;
}
.demo-title {
font-size: 30rpx;
margin-top: 5px;
color: $u-main-color;
}
.demo-tag {
display: flex;
margin-top: 5px;
}
.demo-tag-owner {
background-color: $u-type-error;
color: #FFFFFF;
display: flex;
align-items: center;
padding: 4rpx 14rpx;
border-radius: 50rpx;
font-size: 20rpx;
line-height: 1;
}
.demo-tag-text {
border: 1px solid $u-type-primary;
color: $u-type-primary;
margin-left: 10px;
border-radius: 50rpx;
line-height: 1;
padding: 4rpx 14rpx;
display: flex;
align-items: center;
border-radius: 50rpx;
font-size: 20rpx;
}
.demo-price {
font-size: 30rpx;
color: $u-type-error;
margin-top: 5px;
}
.demo-shop {
font-size: 22rpx;
color: $u-tips-color;
margin-top: 5px;
}
.widget-location {
position: fixed;
right: calc(var(--window-right) + 40rpx);
bottom: calc(var(--window-bottom) + 150rpx);
width: 72rpx;
height: 72rpx;
z-index: 200;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
color: #555;
font-size: 40rpx;
}
.gui-footer-icon-buttons {
color: #FFF;
width: 130rpx;
// height: 80rpx;
padding: 20rpx 10rpx 10rpx;
flex: 1;
position: relative;
margin: 0;
// background-color: #F8F8F8;
}
.tab image {
width: 50rpx;
height: 60rpx;
}
.gui-footer-buttons-ab {
position: absolute;
z-index: 101;
left: 325rpx;
top: 0rpx;
width: 110rpx;
height: 150rpx;
}
.gui-footer-buttons-ab-icon {
width: 110rpx;
height: 110rpx;
line-height: 120rpx;
text-align: center;
font-size: 68rpx;
background-color: #F7F8FA;
border-radius: 100rpx;
}
</style>