1hjz
/
1hjz-h5
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

测试百度地图

develop
nesxy 6 years ago
parent
a4e47cdf7b
commit
7b5529066f
3 changed files with 475 additions and 384 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 31
      build/webpack.base.conf.js
  2. 1
      index.html
  3. 827
      src/view/home.vue

31
build/webpack.base.conf.js
View File

@ -9,7 +9,7 @@ var vueLoaderConfig = require('./vue-loader.conf')
var webpack = require("webpack") var webpack = require("webpack")
function resolve (dir) {
function resolve(dir) {
return path.join(__dirname, '..', dir) return path.join(__dirname, '..', dir)
} }
@ -20,9 +20,9 @@ let webpackConfig = {
output: { output: {
path: config.build.assetsRoot, path: config.build.assetsRoot,
filename: '[name].js', filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath :
config.dev.assetsPublicPath
}, },
resolve: { resolve: {
extensions: ['.js', '.vue', '.json'], extensions: ['.js', '.vue', '.json'],
@ -32,8 +32,7 @@ let webpackConfig = {
} }
}, },
module: { module: {
rules: [
{
rules: [{
test: /\.vue$/, test: /\.vue$/,
loader: 'vue-loader', loader: 'vue-loader',
options: vueLoaderConfig options: vueLoaderConfig
@ -62,16 +61,20 @@ let webpackConfig = {
] ]
}, },
plugins: [ plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
} }
module.exports = vuxLoader.merge(webpackConfig, { module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui', 'progress-bar', 'duplicate-style']
})
plugins: ['vux-ui', 'progress-bar', 'duplicate-style'],
//添加
externals: {
"BMap": "BMap"
},
})

1
index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script> <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=m8sGHZTpKuDeDAU5qs4YUWWDP1v6XZsq"></script>
<title>一号家政</title> <title>一号家政</title>
</head> </head>
<body> <body>

827
src/view/home.vue
View File

@ -1,115 +1,168 @@
<template> <template>
<div class="home" style="height: auto;">
<div style="height: 0.9rem;"></div>
<div ref="header" class="page-top" id="top-nav">
<i class="position" @click="show = true"><img src="../assets/images/icon/position.png" />{{defaultCity}}</i>
<i class="logo"><img src="../assets/images/icon/logo.png" /></i>
<i class="text"><a href="tel:400-6080100">联系客服</a></i>
<div class="home" style="height: auto;">
<div style="height: 0.9rem;"></div>
<div ref="header" class="page-top" id="top-nav">
<i class="position" @click="show = true">
<img src="../assets/images/icon/position.png" />
{{defaultCity}}
</i>
<i class="logo">
<img src="../assets/images/icon/logo.png" />
</i>
<i class="text">
<a href="tel:400-6080100">联系客服</a>
</i>
</div>
<div class="page-content">
<!--banner图-->
<div class="banner" v-if="bannerImgList.length > 0">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item,index) in bannerImgList" :key="index">
<a
:href="item.linkUrl ? item.linkUrl: 'javascript:void(0)' "
class="swiper-img"
:style="{backgroundImage:'url('+item.imgUrl+')'}"
></a>
</swiper-slide>
</swiper>
<div class="swiper-pagination"></div>
</div>
<!-- TODO: 对应换hot 和 new 图标 -->
<div class="service f-flex" v-if="iconList.length != 0">
<div
class="item"
v-for="(item,index) in iconList"
:key="index"
v-on:click="goods(item.combinationNo)"
>
<a href="javascript:void(0)" class="f-relative f-inb">
<img :src="imghost + item.icon" class="icon" />
<img src="../assets/images/icon/hot.png" class="hot" v-if="item.label == '2'" />
<img src="../assets/images/icon/new.png" class="new" v-if="item.label == '1'" />
</a>
<p>{{item.combinationName}}</p>
</div> </div>
<div class="page-content">
<!--banner图-->
<div class="banner" v-if="bannerImgList.length > 0">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item,index) in bannerImgList" :key="index">
<a :href="item.linkUrl ? item.linkUrl: 'javascript:void(0)' " class="swiper-img" :style="{backgroundImage:'url('+item.imgUrl+')'}"></a>
</swiper-slide>
</swiper>
<div class="swiper-pagination"></div>
</div>
<!-- TODO: 对应换hot 和 new 图标 -->
<div class="service f-flex" v-if="iconList.length != 0">
<div class="item" v-for="(item,index) in iconList" :key="index" v-on:click="goods(item.combinationNo)">
<a href="javascript:void(0)" class="f-relative f-inb">
<img :src="imghost + item.icon" class="icon" />
<img src="../assets/images/icon/hot.png" class="hot" v-if="item.label == '2'" />
<img src="../assets/images/icon/new.png" class="new" v-if="item.label == '1'" />
</a>
<p>{{item.combinationName}}</p>
</div>
</div>
<div class="coupon" v-if="promotionImgList.imgUrl">
<a v-if="promotionImgList.linkUrl != '' " :href="promotionImgList.linkUrl"><img :src="promotionImgList.imgUrl" /></a>
<a v-else href="javascript:void(0)"><img :src="promotionImgList.imgUrl" /></a>
</div>
<!-- TODO: 三种样式 -->
<!-- one -->
<div class="recommend f-flex" v-if="activityImgList.length == 3">
<div class="left">
<a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl"></a>
</div>
<div class="right">
<a :href="activityImgList[1].linkUrl"><img :src="activityImgList[1].imgUrl" class="gap"></a>
<a :href="activityImgList[2].linkUrl"><img :src="activityImgList[2].imgUrl"></a>
</div>
</div>
<!-- two -->
<div class="recommend f-flex" v-if="activityImgList.length == 2">
</div>
<div class="coupon" v-if="promotionImgList.imgUrl">
<a v-if="promotionImgList.linkUrl != '' " :href="promotionImgList.linkUrl">
<img :src="promotionImgList.imgUrl" />
</a>
<a v-else href="javascript:void(0)">
<img :src="promotionImgList.imgUrl" />
</a>
</div>
<!-- TODO: 三种样式 -->
<!-- one -->
<div class="recommend f-flex" v-if="activityImgList.length == 3">
<div class="left">
<a :href="activityImgList[0].linkUrl">
<img :src="activityImgList[0].imgUrl" />
</a>
</div>
<div class="right">
<a :href="activityImgList[1].linkUrl">
<img :src="activityImgList[1].imgUrl" class="gap" />
</a>
<a :href="activityImgList[2].linkUrl">
<img :src="activityImgList[2].imgUrl" />
</a>
</div>
</div>
<!-- two -->
<div class="recommend f-flex" v-if="activityImgList.length == 2">
<div class="left">
<a :href="activityImgList[0].linkUrl">
<img :src="activityImgList[0].imgUrl" />
</a>
</div>
<div class="right">
<a :href="activityImgList[1].linkUrl">
<img :src="activityImgList[1].imgUrl" class="two" />
</a>
</div>
</div>
<!-- three -->
<div class="recommend f-flex" v-if="activityImgList.length == 1">
<a :href="activityImgList[0].linkUrl">
<img :src="activityImgList[0].imgUrl" class="three" />
</a>
</div>
<!--商品列表-->
<div class="new-card-box" style="padding-top: 0.3rem;">
<div
class="new-card"
v-if="item.goodsList.length > 0"
v-for="(item,index) in goodsList"
:key="index"
>
<div class="new-card-top">
<img :src=" imghost + item.image" />
</div>
<ul class="card-list">
<li v-for="item1 in item.goodsList">
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo ">
<div class="left"> <div class="left">
<a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl"></a>
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo">
<img v-if="item1.goodsTitleImg!=''" :src=" imghost + item1.goodsTitleImg" />
<img v-else-if="item1.showImg!=''" :src=" imghost + item1.showImg" />
<img v-else :src=" imghost + item1.bannerImgs" />
</a>
</div> </div>
<div class="right"> <div class="right">
<a :href="activityImgList[1].linkUrl"><img :src="activityImgList[1].imgUrl" class="two"></a>
</div>
</div>
<!-- three -->
<div class="recommend f-flex" v-if="activityImgList.length == 1">
<a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl" class="three"></a>
</div>
<!--商品列表-->
<div class="new-card-box" style="padding-top: 0.3rem;">
<div class="new-card" v-if="item.goodsList.length > 0" v-for="(item,index) in goodsList" :key="index">
<div class="new-card-top">
<img :src=" imghost + item.image">
<h3 v-if="item1.goodsTitle">{{item1.goodsTitle}}</h3>
<h3>{{item1.name}}</h3>
<div class="text">{{item1.shortDesc}}</div>
<div class="card-name">
<i
:style="{marginRight:(i+1)==item1.labelList.length?'0':'0.1rem'}"
v-if="label.labelText"
v-for="(label,i) in item1.labelList"
>{{label.labelText}}</i>
</div>
<div class="btn-box">
<!--originalPrice原价price优惠价 -->
<div class="btn-box-left">
<span class="price">
￥
<em>{{item1.price ? item1.price/100:item1.originalPrice/100}}</em>
</span>
<span
class="original-price"
v-if="item1.price&&item1.price!=item1.originalPrice"
>
<em>￥{{ item1.originalPrice/100}}</em>
</span>
</div> </div>
<ul class="card-list">
<li v-for="item1 in item.goodsList">
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo ">
<div class="left">
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo">
<img v-if="item1.goodsTitleImg!=''" :src=" imghost + item1.goodsTitleImg" />
<img v-else-if="item1.showImg!=''" :src=" imghost + item1.showImg" />
<img v-else :src=" imghost + item1.bannerImgs" />
</a>
</div>
<div class="right">
<h3 v-if="item1.goodsTitle" >{{item1.goodsTitle}}</h3>
<h3>{{item1.name}}</h3>
<div class="text">{{item1.shortDesc}}</div>
<div class="card-name">
<i :style="{marginRight:(i+1)==item1.labelList.length?'0':'0.1rem'}" v-if="label.labelText" v-for="(label,i) in item1.labelList">{{label.labelText}}</i>
</div>
<div class="btn-box">
<!--originalPrice原价price优惠价 -->
<div class="btn-box-left">
<span class="price">￥ <em>{{item1.price ? item1.price/100:item1.originalPrice/100}}</em></span>
<span class="original-price" v-if="item1.price&&item1.price!=item1.originalPrice"><em>￥{{ item1.originalPrice/100}}</em></span>
</div>
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo ">立即购买</a>
</div>
</div>
</a>
</li>
</ul>
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo ">立即购买</a>
</div>
</div> </div>
</div>
<div style="height:1rem"></div>
</div>
<div class="page-bottom">
<routerFooter></routerFooter>
</a>
</li>
</ul>
</div> </div>
<popup-picker :show="show" @cancel="cancel" @confirm="confirm" :data-list="addressData" :value="addressValue"></popup-picker>
<div class="Loading-box">
<loading v-model="showLoading" text="loading"></loading>
</div>
<alert v-model="alertShow" title="自动定位地址：" @on-hide="alertHide" button-text="手动切换地址">
{{address}}
<div style="color: #2c3e50">
暂不提供服务
</div>
</alert>
</div>
<div style="height:1rem"></div>
</div>
<div class="page-bottom">
<routerFooter></routerFooter>
</div> </div>
<popup-picker
:show="show"
@cancel="cancel"
@confirm="confirm"
:data-list="addressData"
:value="addressValue"
></popup-picker>
<div class="Loading-box">
<loading v-model="showLoading" text="loading"></loading>
</div>
<alert v-model="alertShow" title="自动定位地址：" @on-hide="alertHide" button-text="手动切换地址">
{{address}}
<div style="color: #2c3e50">暂不提供服务</div>
</alert>
</div>
</template> </template>
<script> <script>
@ -119,6 +172,8 @@ import { Alert, Toast, Loading } from "vux";
import routerFooter from "../components/nav-bottom"; import routerFooter from "../components/nav-bottom";
import popupPicker from "../components/popup-picker.vue"; import popupPicker from "../components/popup-picker.vue";
import Qs from 'qs'; import Qs from 'qs';
//引入BMap
import BMap from 'BMap'
var locationUrl = configs.locationUrl; var locationUrl = configs.locationUrl;
@ -133,6 +188,7 @@ export default {
data() { data() {
return { return {
show: false, show: false,
location:{},
uniqueId:'', uniqueId:'',
defaultCity: "天河区", //区名 默认值 不需要去掉 defaultCity: "天河区", //区名 默认值 不需要去掉
merchantNo: 2, //商户编号 默认值 不需要去掉 merchantNo: 2, //商户编号 默认值 不需要去掉
@ -207,8 +263,8 @@ export default {
list[i].goodsList[y].labelList = list[i] list[i].goodsList[y].labelList = list[i]
.goodsList[y].smallLabel .goodsList[y].smallLabel
? JSON.parse( ? JSON.parse(
list[i].goodsList[y].smallLabel
)
list[i].goodsList[y].smallLabel
)
: ""; : "";
} }
} }
@ -404,12 +460,43 @@ export default {
this.state = 1; this.state = 1;
this.show = true; this.show = true;
}, },
getCity(){
let _this = this
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
if(r.accuracy==null){
alert('您已拒绝地理位置授权');
//用户决绝地理位置授权
return;
}else{
const myGeo = new BMap.Geocoder()
myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), data => {
if (data.addressComponents) {
const result = data.addressComponents
const location = {
creditLongitude: r.point.lat, // 经度
creditLatitude: r.point.lng, // 纬度
creditProvince: result.province || '', // 省
creditCity: result.city || '', // 市
creditArea: result.district || '', // 区
creditStreet: (result.street || '') + (result.streetNumber || '') // 街道
}
_this.location = location;
alert("省-"+location.creditProvince+";市-"+location.creditCity+";区-"+location.creditArea+";街道-"+location.creditStreet+";lat-"+location.creditLatitude+";lng-"+location.creditLongitude);
}
})
}
}
})
},
}, },
mounted() { mounted() {
//异步加载 //异步加载
// this.getdefaultAddress(); // this.getdefaultAddress();
// this.getAddress(); // this.getAddress();
// this.getLocation(); // this.getLocation();
this.getCity();
this.getData(); this.getData();
var uuniqueId = Qs.parse(location.search.substring(1)).uniqueId var uuniqueId = Qs.parse(location.search.substring(1)).uniqueId
if(uuniqueId !== undefined && uuniqueId !== null && uuniqueId !== ""){ if(uuniqueId !== undefined && uuniqueId !== null && uuniqueId !== ""){
@ -436,347 +523,347 @@ export default {
}); });
} }
};
}
</script> </script>
<style lang="scss"> <style lang="scss">
.swiper-pagination { .swiper-pagination {
width: 100%;
height: 0.3rem;
bottom: 0.15rem;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 0.3rem;
bottom: 0.15rem;
display: flex;
align-items: center;
justify-content: center;
} }
.swiper-pagination span { .swiper-pagination span {
width: 0.2rem;
height: 0.2rem;
margin: 0 0.1rem;
background-color: rgba(255, 255, 255, 0.9);
width: 0.2rem;
height: 0.2rem;
margin: 0 0.1rem;
background-color: rgba(255, 255, 255, 0.9);
} }
.swiper-pagination-bullet-active { .swiper-pagination-bullet-active {
background-color: rgba(255, 255, 255, 1);
background-color: rgba(255, 255, 255, 1);
} }
.weui-dialog__hd { .weui-dialog__hd {
padding: 0;
padding: 0;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.btn-box { .btn-box {
display: flex;
position: absolute;
bottom: 0;
align-items: center;
justify-content: space-between;
width: 100%;
.btn-box-left {
display: flex; display: flex;
position: absolute;
bottom: 0;
align-items: center;
justify-content: space-between;
width: 100%;
.btn-box-left {
display: flex;
align-items: flex-end;
// justify-content: space-around;
}
align-items: flex-end;
// justify-content: space-around;
}
} }
.home { .home {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 1);
position: relative;
.page-top {
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
position: relative;
.page-top {
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
justify-content: space-around;
z-index: 100;
position: fixed;
top: 0;
left: 0;
i {
font-style: normal;
display: flex;
align-items: center;
}
.position {
font-size: 0.26rem;
font-weight: 500;
color: rgba(153, 153, 153, 1);
img {
width: 0.2rem;
height: 0.25rem;
margin-right: 0.07rem;
}
}
.logo img {
width: 1.77rem;
height: 0.3rem;
}
.text {
height: 0.28rem;
font-size: 0.28rem;
font-weight: 400;
color: rgba(36, 158, 108, 1);
a {
position: relative;
color: rgba(36, 158, 108, 1);
}
}
display: flex;
align-items: center;
justify-content: space-around;
z-index: 100;
position: fixed;
top: 0;
left: 0;
i {
font-style: normal;
display: flex;
align-items: center;
}
.position {
font-size: 0.26rem;
font-weight: 500;
color: rgba(153, 153, 153, 1);
img {
width: 0.2rem;
height: 0.25rem;
margin-right: 0.07rem;
}
}
.logo img {
width: 1.77rem;
height: 0.3rem;
}
.text {
height: 0.28rem;
font-size: 0.28rem;
font-weight: 400;
color: rgba(36, 158, 108, 1);
a {
position: relative;
color: rgba(36, 158, 108, 1);
}
} }
}
} }
.home .page-content { .home .page-content {
background: rgba(255, 255, 255, 1);
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
background: rgba(255, 255, 255, 1);
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
position: relative;
top: 0;
z-index: 10;
.banner {
max-height: 3rem;
position: relative; position: relative;
top: 0;
z-index: 10;
.banner {
max-height: 3rem;
position: relative;
-webkit-overflow-scrolling: touch;
a {
display: block;
}
div img {
width: 100%;
height: 3rem;
display: block;
margin: auto;
}
-webkit-overflow-scrolling: touch;
a {
display: block;
} }
.coupon {
margin-top: 0.3rem;
img {
width: 6.8rem;
display: block;
margin: auto;
}
div img {
width: 100%;
height: 3rem;
display: block;
margin: auto;
} }
.new-card-first {
padding-top: 0.3rem;
}
.coupon {
margin-top: 0.3rem;
img {
width: 6.8rem;
display: block;
margin: auto;
} }
.new-card .new-card-top {
padding: 0rem 0 0.3rem;
img {
width: 7.1rem;
display: block;
margin: auto;
}
}
.new-card-first {
padding-top: 0.3rem;
}
.new-card .new-card-top {
padding: 0rem 0 0.3rem;
img {
width: 7.1rem;
display: block;
margin: auto;
} }
}
} }
.home .page-content .banner > div { .home .page-content .banner > div {
max-height: 3rem;
-webkit-overflow-scrolling: touch;
max-height: 3rem;
-webkit-overflow-scrolling: touch;
} }
.swiper-img { .swiper-img {
width: 100%;
height: 3rem;
background-size: 100% 100%;
width: 100%;
height: 3rem;
background-size: 100% 100%;
} }
.home .page-content .new-card .card-list li { .home .page-content .new-card .card-list li {
width: 7rem;
height: 2.5rem;
border: 1px solid rgba(238, 238, 238, 1);
box-sizing: border-box;
padding: 0.2rem;
margin: auto;
margin-bottom: 0.3rem;
display: block;
width: 7rem;
height: 2.5rem;
border: 1px solid rgba(238, 238, 238, 1);
box-sizing: border-box;
padding: 0.2rem;
margin: auto;
margin-bottom: 0.3rem;
display: block;
} }
.home .page-content .new-card .card-list li a { .home .page-content .new-card .card-list li a {
display: flex;
align-items: center;
// justify-content: space-between;
display: flex;
align-items: center;
// justify-content: space-between;
} }
.home .page-content .new-card .card-list li .left { .home .page-content .new-card .card-list li .left {
width: 2rem;
height: 2rem;
margin-right: 0.18rem;
width: 2rem;
height: 2rem;
margin-right: 0.18rem;
} }
.home .page-content .new-card .card-list li .left img { .home .page-content .new-card .card-list li .left img {
width: 2rem;
height: 2rem;
display: block;
width: 2rem;
height: 2rem;
display: block;
} }
.home .page-content .new-card .card-list li .right { .home .page-content .new-card .card-list li .right {
// width: 4.3rem;
flex-grow: 1;
display: flex;
flex-direction: column;
height: 2rem;
position: relative;
padding-top: 0.15rem;
box-sizing: border-box;
// width: 4.3rem;
flex-grow: 1;
display: flex;
flex-direction: column;
height: 2rem;
position: relative;
padding-top: 0.15rem;
box-sizing: border-box;
} }
.home .page-content .new-card .card-list li .right h3 { .home .page-content .new-card .card-list li .right h3 {
font-size: 0.33rem;
font-weight: 400;
padding-top: 0.03rem;
line-height: 1.2;
color: rgba(51, 51, 51, 1);
margin-bottom: 0.13rem;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
white-space: normal;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
font-size: 0.33rem;
font-weight: 400;
padding-top: 0.03rem;
line-height: 1.2;
color: rgba(51, 51, 51, 1);
margin-bottom: 0.13rem;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
white-space: normal;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
} }
.home .page-content .new-card .card-list li .right .text { .home .page-content .new-card .card-list li .right .text {
font-size: 0.24rem;
// height: 0.24rem;
font-weight: 400;
line-height: 1.2;
color: rgba(153, 153, 153, 1);
margin-bottom: 0.16rem;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
font-size: 0.24rem;
// height: 0.24rem;
font-weight: 400;
line-height: 1.2;
color: rgba(153, 153, 153, 1);
margin-bottom: 0.16rem;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-wrap: break-word;
white-space: normal;
word-break: break-all;
} }
.home .page-content .new-card .card-list li .right .card-name { .home .page-content .new-card .card-list li .right .card-name {
height: 0.3rem;
font-size: 0.2rem;
font-style: normal;
font-weight: 400;
color: rgba(244, 163, 83, 1);
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
white-space: normal;
word-break: break-all;
-webkit-line-clamp: 1;
word-wrap: break-word;
height: 0.3rem;
font-size: 0.2rem;
font-style: normal;
font-weight: 400;
color: rgba(244, 163, 83, 1);
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
white-space: normal;
word-break: break-all;
-webkit-line-clamp: 1;
word-wrap: break-word;
} }
.home .page-content .new-card .card-list li .right .card-name i { .home .page-content .new-card .card-list li .right .card-name i {
font-style: normal;
line-height: 1.5;
background: rgba(255, 242, 229, 1);
padding: 0.05rem 0.1rem;
// line-height: 0.28rem;
font-style: normal;
line-height: 1.5;
background: rgba(255, 242, 229, 1);
padding: 0.05rem 0.1rem;
// line-height: 0.28rem;
} }
.home .page-content .new-card .card-list li .right .btn { .home .page-content .new-card .card-list li .right .btn {
display: flex;
align-items: center;
justify-content: space-around;
display: flex;
align-items: center;
justify-content: space-around;
} }
.home .page-content .new-card .card-list li .right .btn-box .price { .home .page-content .new-card .card-list li .right .btn-box .price {
color: #249e6c;
min-width: 1.4rem;
display: flex;
align-items: flex-end;
color: #249e6c;
min-width: 1.4rem;
display: flex;
align-items: flex-end;
} }
.home .page-content .new-card .card-list li .right .btn-box span em { .home .page-content .new-card .card-list li .right .btn-box span em {
font-size: 0.38rem;
font-weight: 600;
line-height: 0.9;
display: inline-block;
font-style: normal;
font-size: 0.38rem;
font-weight: 600;
line-height: 0.9;
display: inline-block;
font-style: normal;
} }
.home .page-content .new-card .card-list li .right .btn-box .original-price em { .home .page-content .new-card .card-list li .right .btn-box .original-price em {
font-size: 0.24rem;
text-decoration: line-through;
font-weight: normal;
font-size: 0.24rem;
text-decoration: line-through;
font-weight: normal;
} }
.home .page-content .new-card .card-list li .right .btn-box span { .home .page-content .new-card .card-list li .right .btn-box span {
font-size: 0.22rem;
font-weight: 400;
color: rgba(153, 153, 153, 1);
margin-right: auto;
font-size: 0.22rem;
font-weight: 400;
color: rgba(153, 153, 153, 1);
margin-right: auto;
} }
.home .page-content .new-card .card-list li .right .btn-box a { .home .page-content .new-card .card-list li .right .btn-box a {
width: 1.7rem;
height: 0.56rem;
border-radius: 0rem;
background-color: #2bb079;
border: none;
color: #fff;
border-radius: 2px;
font-size: 0.3rem;
display: flex;
align-items: center;
justify-content: center;
width: 1.7rem;
height: 0.56rem;
border-radius: 0rem;
background-color: #2bb079;
border: none;
color: #fff;
border-radius: 2px;
font-size: 0.3rem;
display: flex;
align-items: center;
justify-content: center;
} }
.home .page-bottom { .home .page-bottom {
width: 100%;
height: 1rem;
position: fixed;
bottom: 0;
background: rgba(255, 255, 255, 1);
z-index: 130;
width: 100%;
height: 1rem;
position: fixed;
bottom: 0;
background: rgba(255, 255, 255, 1);
z-index: 130;
} }
.Loading-box .weui-toast { .Loading-box .weui-toast {
width: 100%;
min-height: 100% !important;
overflow: hidden;
top: 0;
width: 100%;
min-height: 100% !important;
overflow: hidden;
top: 0;
} }
.Loading-box .weui-icon_toast.weui-loading { .Loading-box .weui-icon_toast.weui-loading {
margin-top: 75%;
margin-top: 75%;
} }
.service { .service {
padding: 0.11rem 0;
.item {
text-align: center;
font-size: 0;
flex: 1;
.icon {
width: 0.78rem;
height: 0.78rem;
}
.hot {
position: absolute;
top: 0.05rem;
right: 0;
width: 0.24rem;
height: 0.1rem;
}
.new {
position: absolute;
top: 0.05rem;
right: 0;
width: 0.24rem;
height: 0.08rem;
}
p {
color: #666;
font-size: 0.21rem;
}
padding: 0.11rem 0;
.item {
text-align: center;
font-size: 0;
flex: 1;
.icon {
width: 0.78rem;
height: 0.78rem;
} }
.hot {
position: absolute;
top: 0.05rem;
right: 0;
width: 0.24rem;
height: 0.1rem;
}
.new {
position: absolute;
top: 0.05rem;
right: 0;
width: 0.24rem;
height: 0.08rem;
}
p {
color: #666;
font-size: 0.21rem;
}
}
} }
.recommend { .recommend {
padding: 0 0.2rem;
margin-top: 0.3rem;
font-size: 0;
.left {
img {
width: 2.51rem;
height: 1.74rem;
margin-right: 0.05rem;
}
padding: 0 0.2rem;
margin-top: 0.3rem;
font-size: 0;
.left {
img {
width: 2.51rem;
height: 1.74rem;
margin-right: 0.05rem;
} }
.right {
img {
width: 4.54rem;
height: 0.84rem;
}
.gap {
margin-bottom: 0.06rem;
}
.two {
width: 4.54rem;
height: 1.74rem;
}
}
.right {
img {
width: 4.54rem;
height: 0.84rem;
}
.gap {
margin-bottom: 0.06rem;
} }
.three {
width: 7.1rem;
height: 1.74rem;
.two {
width: 4.54rem;
height: 1.74rem;
} }
}
.three {
width: 7.1rem;
height: 1.74rem;
}
} }
</style> </style>
Write Preview
Loading…
Cancel
Save