java-mall-app/pages/index/index-single.vue
2024-11-01 16:35:40 +08:00

1016 lines
25 KiB
Vue

<template>
<view class="page" v-if="loadPageFlag" :style="{background:(BgConfig.BackgroundObj.type==1?BgConfig.BackgroundObj.bgColor:('url('+BgConfig.BackgroundObj.path+') no-repeat '+ BgConfig.BackgroundObj.pathColor))}">
<status-bar :backgroundColor="PageNav.window.navigationBarBackgroundColor" v-if="false"></status-bar>
<uni-nav-bar :leftFlag="!!Config.SUBSITE_ENABLE || !!Config.LANG_ENABLE" :rightFlag="rightFlag" :statusBar="true" :fixed="true" :color="PageNav.window.navigationBarTextStyle" :backgroundColor="PageNav.window.navigationBarBackgroundColor" :background-color="PageNav.window.navigationBarBackgroundColor" right-icon="scan" right-width="120" @click-left="showCity" @click-right="scan">
<block slot="left">
<view class="city" v-if="Config.SUBSITE_ENABLE || !!Config.LANG_ENABLE">
<block v-if="!!Config.LANG_ENABLE">
<image :src="current_img" mode="widthFix" style="width: 36rpx;height: 36rpx;line-height: 36rpx;" :color="PageNav.window.navigationBarTextStyle"></image>
<view style="font-size: 30rpx;max-height: 80rpx;" class="uni-ellipsis">{{ current_label }}</view>
</block>
<block v-else>
<uni-icons type="location" :color="PageNav.window.navigationBarTextStyle" size="18"/>
<view style="font-size: 30rpx;max-height: 80rpx;" class="uni-ellipsis">{{ city }}</view>
</block>
</view>
</block>
<view class="input-view">
<uni-icons type="search" size="22" color="#666666" style="line-height: 60rpx;"/>
<input confirm-type="search" class="input" type="text" :placeholder="__('输入搜索关键词')" @click="onSearch">
</view>
<block slot="right">
<view style="padding-right: 14rpx;line-height: 80rpx;opacity: 0.6;position:relative;" @click.stop="$.gopage('/member/member/message')">
<uni-icons type="chat" :color="PageNav.window.navigationBarTextStyle" size="24" :style="'color:' + PageNav.window.navigationBarTextStyle" />
<view class="msg-num" v-if="newMsgNum>0">{{newMsgNum}}</view>
</view>
</block>
</uni-nav-bar>
<diy :StoreInfo="ChatInfo" :BgConfig="BgConfig" :PageContent="PageContent" :pageId="pageId" :PageNav="PageNav" :loadPageFlag="loadPageFlag" :hideDiy="hideDiy"></diy>
<guess-you-like ref="guessYouLike"></guess-you-like>
<coupon ref="coupon" :user_is_new="userInfo.user_is_new || false" :CouponAmount="100" :mskType="1" v-if="false"></coupon>
<!-- 弹出层 -->
<view class="uni-banner" style="background:#FFFFFF;height: 800rpx;" v-if="bannerShow">
<view style="justify-content:flex-end;" @tap="closeBanner">
<view style="justify-content:flex-end; text-align:right; padding:20rpx;">
<text class="uni-icon uni-icon-close"></text>
</view>
</view>
<view>
<scroll-view scroll-y="true" style="height:550rpx;">
<view class="uni-padding-wrap" style="width: 96%;margin-right: 40rpx;">
<view class="uni-title">{{__('语言选择')}}</view>
<view>
<radio-group class="lang" @change="onLangChange">
<label v-for="(lang, idx) in Lang.data.items" :key="idx" class="lang-list">
<view class="option">
<view class="img"><image :src="lang.img" mode="widthFix"></image></view>
<text class="txt">{{lang.label}}</text>
</view>
<radio :value="lang.lang" :checked="lang.lang == Lang.lang"></radio>
</label>
</radio-group>
</view>
</view>
<block v-if="false">
<view class="uni-title uni-common-mt uni-common-pl">{{__('汇率选择')}}</view>
<view class="uni-list">
<radio-group @change="onCurrencyChange">
<label class="uni-list-cel uni-list-cell-pd">
<view>
<radio value="100971" checked="true" v-if="current_currency == 100971" />
<radio value="100971" v-else />
</view>
<image src="/static/images/national/AED.png" style="width: 60rpx;height: 40rpx"></image>
<view>{{__('AED')}}</view>
</label>
<label class="uni-list-cel uni-list-cell-pd">
<view>
<radio value="100966" checked="true" v-if="current_currency == 100966" />
<radio value="100966" v-else />
</view>
<image src="/static/images/national/SAR.png" style="width: 60rpx;height: 40rpx"></image>
<view>{{__('SAR')}}</view>
</label>
<label class="uni-list-cel uni-list-cell-pd">
<view>
<radio value="100973" checked="true" v-if="current_currency == 100973" />
<radio value="100973" v-else />
</view>
<image src="/static/images/national/BHD.png" style="width: 60rpx;height: 40rpx"></image>
<view>{{__('BHD')}}</view>
</label>
<label class="uni-list-cel uni-list-cell-pd">
<view>
<radio value="100968" checked="true" v-if="current_currency == 100968" />
<radio value="100968" v-else />
</view>
<image src="/static/images/national/OMR.png" style="width: 60rpx;height: 40rpx"></image>
<view>{{__('OMR')}}</view>
</label>
<label class="uni-list-cel uni-list-cell-pd">
<view>
<radio value="100965" checked="true" v-if="current_currency == 100965" />
<radio value="100965" v-else />
</view>
<image src="/static/images/national/KWD.png" style="width: 60rpx;height: 40rpx"></image>
<view>{{__('KWD')}}</view>
</label>
<label class="uni-list-cel uni-list-cell-pd">
<view>
<radio value="100964" checked="true" v-if="current_currency == 100964" />
<radio value="100964" v-else />
</view>
<image src="/static/images/national/IQD.png" style="width: 60rpx;height: 40rpx"></image>
<view>{{__('USD')}}</view>
</label>
</radio-group>
</view>
</block>
</scroll-view>
<view style="padding:50rpx 0; padding-bottom:68rpx;">
<button type="warn" class="mini-btn" @click="onConfirmLang" style="background:#F6644D; margin:0 80rpx;">
{{__('确认选择')}}
</button>
</view>
</view>
</view>
<view class="uni-mask" v-if="bannerShow"></view>
<!-- 弹出层 -->
<view :class="['msk']" @tap="onPopClose" v-if="showPopFlag">
<view class="msk_box">
<image :src="index_pop_wap_img" style='width:100%' mode="widthFix" @tap="onPopClick"></image>
<view class="msk_box_info" style='right:16%;top:40%;'>
</view>
<view class="btn_cancel" @tap="onPopClose">✕</view>
</view>
</view>
</view>
</template>
<script>
import statusBar from '../../components/status-bar.vue'
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
import diy from '../../components/themes/diy.vue'
import coupon from '../../components/coupon/coupon.vue'
import bwSwiper from '@/components/bw-swiper/bw-swiper.vue'
import guessYouLike from '@/components/guess-you-like.vue'
var thatProm = {
ProductInfo: {},
addCar: false,
count: 0,
windowHeight: 0,
categoryname: "",
click6: true,
cid: 0,
cartlist: {},
isdata: false,
Sel_Id: [],
tapindex: 1,
viewtype: 0,
shopInfo: {},
pdlist: [],
sort: 2,
ispage: true,
flag: true,
distance: 0,
istop: false,
TemplateKey: "",
smallCategory: {},
AdContent: {},
post: {
store_id: 0,
orderby: 1,
sort: 2,
isnew: false,
curpage: 1
},
formdate: "",
pageId: 0
};
import {
mapState,
mapMutations
} from 'vuex'
export default {
/**
* 页面的初始数据
*/
data: function() {
return {
options: {},
Coupons: [],
isCancelSuccess: true,
isCancel: true,
CouponAmount: 0,
user_is_new: 1,
PageContent: [],
BgConfig: {BackgroundObj:{type:1, bgColor:'#ffffff' ,"pathColor":"#f8f8f8","path":""}},
PageNav:{window:{"navigationBarBackgroundColor":"#ffffff","navigationBarTextStyle":"black","navigationBarTitleText":"","backgroundColor":"#f8f8f8","backgroundTextStyle":"dark"}},
loadPageFlag: false,
hideDiy: false,
ChatInfo: {},
TemplateKey: "",
commonTPL: Object.assign({}, thatProm),
indexArray: [],
splist: [],
splistStr: [],
pid: 0,
index: 0,
shareImg: "",
shareTitle: "",
refresh: true,
pageId: 0,
w: 0, //windowWidth
chatUrl:'',
city: '全中国',
showSubsiteFlag:true,
rightFlag:true,
showPopFlag:false,
index_pop_wap_img:'',
index_pop_wap_url:'',
bannerShow:false,
current_currency:86,
current_lang:"zh-CN",
current_img:"https://static.lancerdt.com/lancerdt/flags/square/5322affbc4d56.png",
current_label:"中文"
}
},
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin', 'newMsgNum']),
components: {
diy,
statusBar,
uniNavBar,
bwSwiper,
coupon,
guessYouLike
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
/*
uni.setNavigationBarTitle({
title:this.__('')
});
*/
//console.info(this.userInfo);
//#ifdef MP
this.rightFlag = false;
//#endif
var that = this;
that.setData({
current_currency:that.Lang.currency_id,
current_lang:that.Lang.lang,
current_label:that.Lang.label,
current_img:that.Lang.img
})
if (options.scene) {
var scene = decodeURIComponent(options.scene);
var opts = {};
opts = that.$.parse_str(scene);
options = Object.assign(options, opts);
}
uni.setNavigationBarTitle({
title:this.__('首页')
});
// 离开页面
this.setData({
indexArray: []
});
var w = that.$.getSystemInfoSync().windowWidth;
that.setData({
w: w,
options: options
})
that.getPlantformInfo(function(plantform) {
//分类数据
that.initData(false);
/*
if (user) {
that.setData({
//user_is_new: that.userInfo.user_is_new,
//CouponAmount: that.userInfo.CouponAmount
});
}
*/
//that.notice.addNotification("RefreshProduct", that.RefreshProduct, that);
try {
thatProm.windowHeight = that.$.getSystemInfoSync().windowHeight - 50;
that.setData({
commonTPL: thatProm
})
} catch (n) {
//console.log(" Do something when catch error", n)
}
//start 门店选择
if (that.Config.CHAIN_ENABLE)
{
let chain_name = uni.getStorageSync('chain_name');
if (that.$.getStorageSync('chain_name'))
{
that.setData({
city:that.$.getStorageSync('chain_name') ? that.$.getStorageSync('chain_name') + "" : that.__('选择门店')
});
}
else
{
that.$.confirm(
that.__('请选择门店'),
function(data) {
if (data.confirm) {
that.showCity();
}
else
{
//存入本地
uni.setStorageSync('chain_id', 1001);
uni.setStorageSync('chain_name', that.__('一号店'));
that.notice.postNotificationName("RefreshOrderChain", {chain_id:1001, chain_name:that.__('一号店'), ChainInfo:{chain_id:1001, chain_name:that.__('一号店')}});
}
},
true
);
}
}
//end 门店选择
//start 店铺选择
if (false)
{
let store_name = uni.getStorageSync('store_name');
if (that.$.getStorageSync('store_name'))
{
that.setData({
city:that.$.getStorageSync('store_name') ? that.$.getStorageSync('store_name') + "" : that.__('选择店铺')
});
}
else
{
that.$.confirm(
that.__('请选择店铺'),
function(data) {
if (data.confirm) {
that.showCity();
}
else
{
//存入本地
uni.setStorageSync('store_id', 1001);
uni.setStorageSync('store_name', that.__('一号店'));
that.notice.postNotificationName("RefreshStoreName");
}
},
true
);
}
}
//end 店铺选择
})
that.notice.addNotification("RefreshStoreName", that.RefreshStoreName, that);
that.notice.addNotification("RefreshOrderChain", that.RefreshOrderChain, that);
that.notice.addNotification("RefreshSubsite", that.RefreshSubsite, that);
that.notice.addNotification("ScanCode", that.onScanCode, that);
//
that.setData({
city:that.$.getStorageSync('site_name') ? that.$.getStorageSync('site_name') : that.__('全国站')
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
//
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
let that = this;
//that.$.isNull(that.plantformInfo) || uni.setNavigationBarTitle({title: that.plantformInfo.name});
//this.refresh || this.setData({refresh: true})
this.showCartNum();
// #ifdef APP-PLUS
if (this.pageId > 0)
{
this.hideDiy = false;
}
// #endif
that.resetLang();
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
// #ifdef APP-PLUS
this.hideDiy = true;
// #endif
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
// 离开页面,注销事件
var that = this
//that.notice.removeNotification("RefreshProduct", that);
that.notice.removeNotification("RefreshStoreName", that);
that.notice.removeNotification("RefreshOrderChain", that);
that.notice.removeNotification("RefreshSubsite", that);
that.notice.removeNotification("ScanCode", that);
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
this.setData({
indexArray: []
});
this.initData(true)
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
this.$refs.guessYouLike.scrollbottom();
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
// #ifdef MP-WEIXIN
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
});
// #endif
return {
title: this.shareTitle,
imageUrl: this.shareImg,
path: "/pages/index/index?uid=" + this.userInfo.user_id
}
},
/**
* 用户点击右上角分享朋友圈
*/
onShareTimeline: function () {
return {
title: this.shareTitle,
query: {
uid: this.userInfo.user_id
},
imageUrl: this.shareImg,
}
},
/**
* 页面滚动触发事件的处理函数
*/
onPageScroll: function() {},
methods: {
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo', 'showCartNum']),
//读取diy内容
getDivModel: function(force_refresh) {
var that = this,
params = {};
let site_id = that.$.getStorageSync('site_id');
if (site_id)
{
params['site_id'] = site_id;
}
that.$.request({
url: that.Config.URL.index_app,
data: params,
ajaxCache: {
timeout: that.Config.CACHE_EXPIRE,
forceRefresh: force_refresh
},
success: function(data, status, msg, code) {
uni.stopPullDownRefresh()
that.setData({
loadPageFlag: true
});
that.setData({
pageId: data.page_id,
PageContent: that.$.parseJSON(data.page_code),
BgConfig: that.$.parseJSON(data.page_config),
PageNav: that.$.parseJSON(data.page_nav),
shareImg: data.page_share_image,
shareTitle: data.page_share_title
});
if (that.PageNav.window.navigationBarTextStyle == 'black')
{
that.PageNav.window.navigationBarTextStyle = '#000000'
}
if (that.PageNav.window.navigationBarTextStyle == 'white')
{
that.PageNav.window.navigationBarTextStyle = '#ffffff'
}
uni.setNavigationBarColor({
frontColor: that.PageNav.window.navigationBarTextStyle,
backgroundColor: that.PageNav.window.navigationBarBackgroundColor
})
that.setData({
ChatInfo: {
im_enable:data.im_enable,
im_user_id:data.im_user_id,
puid:data.puid
},
showPopFlag:data.index_pop_wap_enable ? true : false,
index_pop_wap_img:data.index_pop_wap_img,
index_pop_wap_url:data.index_pop_wap_url,
});
}
});
},
RefreshProduct: function(e) {
e ? this.setData({
refresh: true
}) : this.setData({
refresh: false
})
},
RefreshStoreName: function(e) {
//console.info(e);
let refresh = false;
if (e.store_row.store_id != this.$.getStorageSync('store_id'))
{
refresh = true;
}
this.setData({city:e.store_row.store_name});
this.$.setStorageSync('store_id', e.store_row.store_id);
this.$.setStorageSync('store_name', e.store_row.store_name);
// #ifdef H5
$cookies.set('store_id', e.store_row.store_id);
// #endif
if (refresh)
{
//刷新首页
this.setData({
indexArray: []
});
this.initData(true)
}
},
RefreshOrderChain: function(e) {
//console.info(e);
//console.info(e.chain_name);
let refresh = false;
if (e.chain_id != this.$.getStorageSync('chain_id'))
{
refresh = true;
}
this.setData({city:e.ChainInfo.chain_name});
this.$.setStorageSync('chain_id', e.chain_id);
this.$.setStorageSync('chain_name', e.ChainInfo.chain_name);
// #ifdef H5
$cookies.set('chain_id', e.chain_id);
// #endif
if (refresh)
{
//刷新首页
this.setData({
indexArray: []
});
this.initData(true)
}
},
RefreshSubsite: function(e) {
//console.info(e.subsite_id);
//console.info(e.subsite_name);
let refresh = false;
if (e.subsite_id != this.$.getStorageSync('site_id'))
{
refresh = true;
}
this.setData({city:e.subsite_name});
this.$.setStorageSync('site_id', e.subsite_id);
this.$.setStorageSync('site_name', e.subsite_name);
// #ifdef H5
$cookies.set('site_id', e.subsite_id);
// #endif
if (refresh)
{
//刷新首页
this.setData({
indexArray: []
});
this.initData(true)
}
},
//初始化数据
initData: function(force_refresh) {
var that = this;
var param = {};
// #ifndef APP-PLUS
that.$.setNavigationBarTitle({title: that.plantformInfo.name});
// #endif
thatProm.TemplateKey = that.plantformInfo.plantform_template > 1000 ? 'shopdiy' : that.plantformInfo.plantform_template;
if (thatProm.TemplateKey == 'shopdiy') {
thatProm.TemplateKey == "shopdiy" && that.getDivModel(force_refresh) //shopdiy用户自定义UI
} else {}
that.setData({
TemplateKey: thatProm.TemplateKey,
commonTPL: thatProm
})
//
let $title = that.plantformInfo.name;
let $desc = '' || this.plantformInfo.site_meta_description;
let $link = that.$.sprintf('%s/h5/pages/index/index', that.Config.SiteUrl);
let $img_url = this.shareImg || this.plantformInfo.logo;
//初始化微信分享
that.$.wxShare($title, $desc, $link, $img_url)
},
doReceive: function() {
this.cancel(), this.userReceiveCoupon()
},
cancel: function() {
this.setData({
isCancel: false
})
},
cancelsuccess: function() {
this.setData({
isCancelSuccess: true
})
},
innertouch: function() {},
userReceiveCoupon: function() {
var params = {
CouponIds: "",
user_is_new: this.user_is_new
};
var that = this;
//领取操作
that.$.request({
url: that.Config.URL.user.voucher_add,
data: params,
success: function(data, status, msg, code) {
if (status == 200) {
that.setData({
isCancelSuccess: false,
Coupons: data.items
})
} else {
that.$.confirm(msg)
}
}
});
},
onPopClose: function () {
this.setData({showPopFlag: false})
},
onPopClick: function () {
this.$.gopage(this.index_pop_wap_url)
},
confirm() {
},
search() {
uni.showToast({
title: '搜索'
})
},
onSearch(e) {
let that = this;
that.$.gopage("/pagesub/search/search");
},
showCity() {
let that = this;
if (!!that.Config.LANG_ENABLE)
{
that.showConfirmLang();
}
else
{
//that.$.gopage("/pagesub/subsite/subsitelist?city=" + that.city);
//选择店铺模式
//that.$.gopage("/pagesub/index/store-list?issub=1");
//选择门店模式
if (this.Config.CHAIN_ENABLE)
{
that.$.gopage("/chain/chain/list?issub=1");
}
else
{
that.$.gopage("/pagesub/subsite/subsitelist?city=" + that.city);
}
}
},
scan:function(e){
let that = this;
//#ifdef H5
that.$.gopage('/pagesub/scan/scan');
//#endif
//#ifndef H5
that.$.scanCode({
success: function(e) {
//console.info(e.result);
that.onScanCode(e.result);
//
return
var t = e.result.split("=");
t.length > 2 || t.length < 2 ? that.$.alert(that.__("无法识别")) : t[0] == "productId" ? that.$.isNull(t[1]) ? that.$.alert(that.__("无法识别")) : that.$.navigateTo(
"/pages/product/detail?pid=" + t[1]) : t[0] == "eventId" ? that.$.isNull(t[1]) ? that.$.alert(that.__("无法识别")) : that.$.navigateTo(
"../activitycheckin/activitycheckin?eventId=" + t[1]) : that.$.alert(that.__("无法识别"))
},
fail: function(e) {
that.$.alert(that.__("无法识别"))
}
})
//#endif
},
onScanCode:function(e){
//console.info('sss')
//console.info(e)
let that = this;
that.$.gopage(
'/pagesub/webpage/web?u=' +
encodeURIComponent(e)
);
},
showConfirmLang:function(){
this.bannerShow = true;
},
closeBanner: function() {
this.bannerShow = false;
},
onConfirmLang:function(){
let that = this;
this.bannerShow = false;
for(let idx in that.Lang.data.items)
{
if(that.Lang.data.items[idx].lang == that.current_lang){
that.setData({
current_label:that.Lang.data.items[idx].label,
current_img:that.Lang.data.items[idx].img,
current_currency:that.Lang.data.items[idx].currency_id
})
break;
}
}
that.Lang.data.lang = this.current_lang;
that.Lang.data.currency_id = this.current_currency;
that.Lang.data.label = this.current_label;
that.Lang.data.img = this.current_img;
that.Lang.lang = this.current_lang;
that.Lang.currency_id = this.current_currency;
that.Lang.label = this.current_label;
that.Lang.img = this.current_img;
uni.setStorageSync('selang', that.Lang.lang);
uni.setStorageSync('currency_id', that.Lang.currency_id);
that.resetLang();
//#ifdef APP-PLUS
uni.reLaunch({
url:'/pages/index/index'
})
//#endif
//#ifndef APP-PLUS
uni.navigateBack();
//#endif
},
onCurrencyChange: function(e) {
var that = this;
that.setData({
current_currency:e.detail.value
})
},
onLangChange:function(e) {
var that = this;
that.setData({
current_lang:e.detail.value
})
that.onConfirmLang();
}
}
}
</script>
<style lang="scss">
@import "../../styles/_variables.scss";
@import '../../styles/layout.scss';
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100%;
background-size: cover !important;
background-position: top center !important;
margin-bottom:var(--window-bottom);
}
.city {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
margin-left: 6rpx;
white-space: nowrap;
}
.input-view {
width: 92%;
display: flex;
background-color: #e7e7e7;
height: 60rpx;
border-radius: 30rpx;
padding: 0 4%;
flex-wrap: nowrap;
margin: 10rpx 0;
line-height: 60rpx;
}
.input-view .uni-icon {
line-height: 60rpx !important;
}
.input-view .input {
height: 60rpx;
line-height: 60rpx;
width: 94%;
padding: 0 3%;
}
.msg-num{
width: auto;
height: 16px;
line-height: 16px;
border-radius: 16px;
min-width: 16px;
padding: 2px;
font-size: 12px;
text-align: center;
white-space: nowrap;
position: absolute;
top: 6px;
right: 8px;
background-color: #f43530;
color: #fff;
transform: translate(40%,-20%);
}
/* 弹出层形式的广告 */
.uni-banner {
width: 80%;
height: 32%;
position: fixed;
left: 50%;
top: 50%;
background: #fff;
border-radius: 10rpx;
z-index: 9999;
transform: translate(-50%, -50%);
}
.uni-list-cel {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
.lang {
display: flex;
flex-direction: column;
}
.lang .lang-list {
margin-bottom: 30rpx;
display: flex;
justify-content: space-between;
}
.lang .lang-list:last-child {
margin-bottom: 0;
}
.lang .lang-list .option {
display: flex;
justify-content: space-between;
}
.lang .lang-list .option .img {
margin-right: 20rpx;
width: 44rpx;
}
.lang .lang-list .option .img image {
width: 100%;
height: auto;
}
.lang .lang-list .option .txt {
font-size: 28rpx;
}
</style>