update
This commit is contained in:
@@ -1,26 +1,26 @@
|
||||
<template>
|
||||
<div class="goods-detail" v-if="data" :style="{paddingBottom: paddingBottom + 'px'}">
|
||||
<div class="goods-detail" v-if="data" :style="{ paddingBottom: paddingBottom + 'px' }">
|
||||
<swiper class="swiper-container" :options="swiperOption">
|
||||
<swiper-slide v-for="(cover, index) in data.details.covers" :key="index">
|
||||
<div style="height: 100vw;" class="picture">
|
||||
<img :src="cover" alt="">
|
||||
<div style="height: 100vw" class="picture">
|
||||
<img :src="cover" alt="" />
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class="monk-profile">
|
||||
<h1 class="position">{{data.details.title}}</h1>
|
||||
<h1 class="position">{{ data.details.title }}</h1>
|
||||
<div class="bar">
|
||||
<span class="status">进行中</span>
|
||||
<span>已有{{data.details.sales || 0}}人参与</span>
|
||||
<span>已有{{ data.details.sales || 0 }}人参与</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="temple-info">-->
|
||||
<!-- <img class="temple-img" :src="data.temple.picture" alt="">-->
|
||||
<!-- <div class="temple-name">-->
|
||||
<!-- <h4 class="name">{{data.temple.unit_name}}</h4>-->
|
||||
<!-- <p class="visitor">已有 <span>{{data.temple.visit}}</span> 人到访过</p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="temple-info">-->
|
||||
<!-- <img class="temple-img" :src="data.temple.picture" alt="">-->
|
||||
<!-- <div class="temple-name">-->
|
||||
<!-- <h4 class="name">{{data.temple.unit_name}}</h4>-->
|
||||
<!-- <p class="visitor">已有 <span>{{data.temple.visit}}</span> 人到访过</p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<div class="divider"></div>
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
@@ -33,7 +33,7 @@
|
||||
<div class="support-head">
|
||||
<span class="label">感恩功德</span>
|
||||
<ul class="external">
|
||||
<li :class="[listType === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType, 1)">{{lType.name}}</li>
|
||||
<li :class="[listType === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType, 1)">{{ lType.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
@@ -49,13 +49,13 @@
|
||||
</fixed-bottom>
|
||||
|
||||
<van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" safe-area-inset-bottom :close-on-click-overlay="false" :close-on-popstate="true">
|
||||
<div class="caret-spec" >
|
||||
<div class="caret-spec">
|
||||
<div class="head">
|
||||
<span>参与流程： </span>
|
||||
<ul class="step-inline">
|
||||
<li :class="[ current === 0 && 'current']">选择类型</li>
|
||||
<li :class="[ current === 1 && 'current']">填写信息</li>
|
||||
<li :class="[ current === 2 && 'current']">参与成功</li>
|
||||
<li :class="[current === 0 && 'current']">选择类型</li>
|
||||
<li :class="[current === 1 && 'current']">填写信息</li>
|
||||
<li :class="[current === 2 && 'current']">参与成功</li>
|
||||
</ul>
|
||||
</div>
|
||||
<transition>
|
||||
@@ -68,8 +68,8 @@
|
||||
<van-grid :border="false" class="home-grid-nav" column-num="4">
|
||||
<van-grid-item icon="photo-o" :text="nav.name" v-for="(nav, _index) in item" :key="_index" @click="onSelectLight(nav)">
|
||||
<div class="light" :class="[currentLight.id === nav.id && 'current-light']">
|
||||
<img :src="nav.picture" class="light-icon" />
|
||||
<span class="light-name">{{nav.name}}</span>
|
||||
<img :src="nav.picture" class="light-icon" />
|
||||
<span class="light-name">{{ nav.name }}</span>
|
||||
</div>
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
@@ -79,8 +79,8 @@
|
||||
</div>
|
||||
<div class="light-size">
|
||||
<span>灯型</span>
|
||||
<van-radio-group v-model="currentLightSize" direction="horizontal">
|
||||
<van-radio :name="size.id" v-for="size in currentLight.children" :key="size.id" shape="square">{{size.name}}</van-radio>
|
||||
<van-radio-group v-model="currentLightSize" direction="horizontal">
|
||||
<van-radio :name="size.id" v-for="size in currentLight.children" :key="size.id" shape="square">{{ size.name }}</van-radio>
|
||||
</van-radio-group>
|
||||
</div>
|
||||
<div class="light-count">
|
||||
@@ -90,28 +90,30 @@
|
||||
</div>
|
||||
</transition>
|
||||
<div class="next-group">
|
||||
<span class="total">合计：<em>￥{{totalPrice}}</em></span>
|
||||
<span class="total"
|
||||
>合计：<em>￥{{ totalPrice }}</em></span
|
||||
>
|
||||
<button class="next" @click="onNextStep">下一步</button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<!-- 随喜金额-->
|
||||
<!-- 随喜金额-->
|
||||
<random-money v-if="showAnyAmount" :value.sync="showAnyAmount" @change="onReceiveAnyAmount"></random-money>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/css/swiper.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
import "swiper/css/swiper.css";
|
||||
import { swiper, swiperSlide } from "vue-awesome-swiper";
|
||||
import { getGoodsLightDetail, getOrderCompare, hasLogin } from "@/api";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
swiper,
|
||||
swiper,
|
||||
swiperSlide,
|
||||
},
|
||||
data(){
|
||||
data() {
|
||||
return {
|
||||
result: [],
|
||||
showAnyAmount: false,
|
||||
@@ -122,8 +124,8 @@ export default {
|
||||
checked: false,
|
||||
current: 0,
|
||||
data: null,
|
||||
value: '',
|
||||
spec_id: '',
|
||||
value: "",
|
||||
spec_id: "",
|
||||
step: 0,
|
||||
dreamInfo: null,
|
||||
anyPrice: 0, // 随喜金额
|
||||
@@ -131,16 +133,16 @@ export default {
|
||||
autoplay: 8000,
|
||||
initialSlide: 1,
|
||||
loop: false,
|
||||
pagination: '.swiper-pagination',
|
||||
onSlideChangeEnd: swiper => {
|
||||
console.log('onSlideChangeEnd', swiper.realIndex)
|
||||
}
|
||||
pagination: ".swiper-pagination",
|
||||
onSlideChangeEnd: (swiper) => {
|
||||
console.log("onSlideChangeEnd", swiper.realIndex);
|
||||
},
|
||||
},
|
||||
listType: 1,
|
||||
listTypes: [
|
||||
{ id: 1, name: '实时', },
|
||||
{ id: 2, name: '月榜', },
|
||||
{ id: 3, name: '总榜', },
|
||||
{ id: 1, name: "实时" },
|
||||
{ id: 2, name: "月榜" },
|
||||
{ id: 3, name: "总榜" },
|
||||
],
|
||||
page: 1,
|
||||
payList: [],
|
||||
@@ -149,77 +151,77 @@ export default {
|
||||
currentLightSize: 53,
|
||||
buy_quantity: 1, // 购买数量
|
||||
noMore: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
lightSize(){
|
||||
lightSize() {
|
||||
const { currentLight, currentLightSize } = this;
|
||||
if(!this.currentLightSize) return 0;
|
||||
return currentLight.children.find(item => item.id === currentLightSize);
|
||||
if (!this.currentLightSize) return 0;
|
||||
return currentLight.children.find((item) => item.id === currentLightSize);
|
||||
},
|
||||
lights(){
|
||||
lights() {
|
||||
const data = this.data;
|
||||
if(!data) return [];
|
||||
if (!data) return [];
|
||||
const { goods } = data;
|
||||
const sliceNumber = 16;
|
||||
const len = Math.ceil(goods.length / sliceNumber);
|
||||
const lights = [];
|
||||
for(let i = 0; i < len; i++){
|
||||
lights.push(goods.slice(sliceNumber * i, i * sliceNumber + sliceNumber))
|
||||
for (let i = 0; i < len; i++) {
|
||||
lights.push(goods.slice(sliceNumber * i, i * sliceNumber + sliceNumber));
|
||||
}
|
||||
return lights;
|
||||
},
|
||||
totalPrice(){
|
||||
if(!this.lightSize) return 0;
|
||||
return this.lightSize.price * this.buy_quantity
|
||||
}
|
||||
totalPrice() {
|
||||
if (!this.lightSize) return 0;
|
||||
return this.lightSize.price * this.buy_quantity;
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
this.getGoodsLightDetail('common');
|
||||
mounted() {
|
||||
this.getGoodsLightDetail("common");
|
||||
},
|
||||
methods: {
|
||||
backHome(){
|
||||
backHome() {
|
||||
const { query } = this.$router.currentRoute;
|
||||
const name = query.temple_id === '1' ? 'home': 'temple-home'
|
||||
this.$router.replace({ name, query: { temple_id: query.temple_id }})
|
||||
const name = query.temple_id === "1" ? "home" : "temple-home";
|
||||
this.$router.replace({ name, query: { temple_id: query.temple_id } });
|
||||
},
|
||||
async onLightAction(){
|
||||
async onLightAction() {
|
||||
await hasLogin();
|
||||
this.showSpec = true
|
||||
this.showSpec = true;
|
||||
},
|
||||
// 选择供灯种类
|
||||
onSelectLight(light){
|
||||
onSelectLight(light) {
|
||||
this.currentLight = light;
|
||||
this.currentLightSize = light.children[0].id;
|
||||
},
|
||||
// 接收随喜金额
|
||||
onReceiveAnyAmount(anyObj){
|
||||
onReceiveAnyAmount(anyObj) {
|
||||
this.anyPrice = anyObj.money;
|
||||
this.onToFillMeritName();
|
||||
},
|
||||
// dreamInfo: 心愿信息
|
||||
onDreamInfoChange(dreamInfo){
|
||||
onDreamInfoChange(dreamInfo) {
|
||||
this.dreamInfo = dreamInfo;
|
||||
},
|
||||
|
||||
onNextStep(){
|
||||
if(!this.currentLightSize){
|
||||
this.$toast.fail('请选择灯型')
|
||||
onNextStep() {
|
||||
if (!this.currentLightSize) {
|
||||
this.$toast.fail("请选择灯型");
|
||||
return;
|
||||
}
|
||||
this.current += 1;
|
||||
if(this.current > 0){
|
||||
if (this.current > 0) {
|
||||
this.onToFillMeritName();
|
||||
}
|
||||
},
|
||||
// 获取更多感恩功德1
|
||||
loadMoreFn(){
|
||||
loadMoreFn() {
|
||||
this.page += 1;
|
||||
this.getPayRecords({id: this.listType}, this.page, 10)
|
||||
this.getPayRecords({ id: this.listType }, this.page, 10);
|
||||
},
|
||||
onToFillMeritName(){
|
||||
onToFillMeritName() {
|
||||
this.$router.push({
|
||||
name: 'fill-name',
|
||||
name: "fill-name",
|
||||
query: {
|
||||
...this.query,
|
||||
goods_id: this.currentLight.id,
|
||||
@@ -227,102 +229,102 @@ export default {
|
||||
friendly_time: this.number,
|
||||
quantity: this.buy_quantity,
|
||||
title: this.data.details.title,
|
||||
subTitle: this.currentLight.name + '：'+this.lightSize.name,
|
||||
subTitle: this.currentLight.name + "：" + this.lightSize.name,
|
||||
amount: this.totalPrice,
|
||||
is_die: this.currentLight.is_die,
|
||||
from: 'goods_light', // 标识为通用商品
|
||||
}
|
||||
})
|
||||
from: "goods_light", // 标识为通用商品
|
||||
},
|
||||
});
|
||||
},
|
||||
async getGoodsLightDetail(type){
|
||||
async getGoodsLightDetail(type) {
|
||||
const { goods_id, temple_id } = this.$route.query;
|
||||
const response = await getGoodsLightDetail(type, goods_id, temple_id);
|
||||
this.data = response;
|
||||
this.currentLight = response.goods[0];
|
||||
this.currentLightSize = this.currentLight.children[0].id
|
||||
await this.getPayRecords({ id: 1}, 1);
|
||||
this.currentLightSize = this.currentLight.children[0].id;
|
||||
await this.getPayRecords({ id: 1 }, 1);
|
||||
this.$nextTick(() => {
|
||||
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50
|
||||
})
|
||||
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50;
|
||||
});
|
||||
this.wechatReady({
|
||||
...this.data.shareConfig,
|
||||
link: location.href
|
||||
})
|
||||
link: location.href,
|
||||
});
|
||||
},
|
||||
// 获取感恩功德
|
||||
async getPayRecords(lType, page, size = 3){
|
||||
async getPayRecords(lType, page, size = 3) {
|
||||
this.listType = lType.id;
|
||||
this.page = page;
|
||||
const res = await getOrderCompare(this.query.temple_id, this.page, this.listType, '', this.query.goods_type, size );
|
||||
if(this.page === 1){
|
||||
const res = await getOrderCompare(this.query.temple_id, this.page, this.listType, "", this.query.goods_type, size);
|
||||
if (this.page === 1) {
|
||||
this.payList = [];
|
||||
}
|
||||
this.payList = this.payList.concat(res.list);
|
||||
this.noMore = res.list.length < 3;
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$lightWidth: 1.15rem;
|
||||
.goods-detail{
|
||||
.goods-content{
|
||||
padding-left: .3rem;
|
||||
padding-right: .3rem;
|
||||
.goods-detail {
|
||||
.goods-content {
|
||||
padding-left: 0.3rem;
|
||||
padding-right: 0.3rem;
|
||||
* {
|
||||
max-width: 100%;
|
||||
font-size: .35rem;
|
||||
font-size: 0.35rem;
|
||||
}
|
||||
}
|
||||
.light-container{
|
||||
padding-left: .4rem;
|
||||
padding-right: .4rem;
|
||||
.light-container {
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem;
|
||||
max-height: 13rem;
|
||||
overflow: auto;
|
||||
.light-wrapper{
|
||||
.light-wrapper {
|
||||
border-top: 1px solid #ddd;
|
||||
h1{
|
||||
font-size: .35rem;
|
||||
margin-top: .4rem;
|
||||
margin-bottom: .5rem;
|
||||
h1 {
|
||||
font-size: 0.35rem;
|
||||
margin-top: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.light-group{
|
||||
.light{
|
||||
.light-group {
|
||||
.light {
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.van-swipe{
|
||||
padding-bottom: .5rem;
|
||||
.van-swipe {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.van-grid-item__content{
|
||||
.van-grid-item__content {
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.current-light{
|
||||
.current-light {
|
||||
border: 1px solid $primary-color;
|
||||
border-radius: 4px;
|
||||
span{
|
||||
span {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
img.light-icon{
|
||||
img.light-icon {
|
||||
width: $lightWidth;
|
||||
height: $lightWidth;
|
||||
vertical-align: top;
|
||||
}
|
||||
span{
|
||||
font-size: .35rem;
|
||||
span {
|
||||
font-size: 0.35rem;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding-top: .3rem;
|
||||
padding-top: 0.3rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.van-grid-item__content{
|
||||
padding-top: .1rem;
|
||||
.van-grid-item__content {
|
||||
padding-top: 0.1rem;
|
||||
}
|
||||
}
|
||||
.van-swipe__indicators {
|
||||
@@ -339,231 +341,230 @@ $lightWidth: 1.15rem;
|
||||
}
|
||||
}
|
||||
.light-size,
|
||||
.light-count{
|
||||
font-size: .4rem;
|
||||
.light-count {
|
||||
font-size: 0.4rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
span{
|
||||
span {
|
||||
color: black;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.light-size{
|
||||
margin-top: .4rem;
|
||||
margin-bottom: .4rem;
|
||||
.light-size {
|
||||
margin-top: 0.4rem;
|
||||
margin-bottom: 0.4rem;
|
||||
|
||||
.van-radio__label{
|
||||
.van-radio__label {
|
||||
margin-left: 4px;
|
||||
font-size: .35rem;
|
||||
font-size: 0.35rem;
|
||||
}
|
||||
.van-radio__icon .van-icon{
|
||||
width: .45rem;
|
||||
height: .45rem;
|
||||
line-height: .45rem;
|
||||
.van-radio__icon .van-icon {
|
||||
width: 0.45rem;
|
||||
height: 0.45rem;
|
||||
line-height: 0.45rem;
|
||||
}
|
||||
.van-radio__icon--checked .van-icon{
|
||||
background: #CF9E3B;
|
||||
border-color: #CF9E3B;
|
||||
.van-radio__icon--checked .van-icon {
|
||||
background: #cf9e3b;
|
||||
border-color: #cf9e3b;
|
||||
}
|
||||
}
|
||||
.light-count{
|
||||
.light-count {
|
||||
align-items: center;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
.support{
|
||||
margin-bottom: .5rem;
|
||||
.support-head{
|
||||
padding: 0 .4rem;
|
||||
.support {
|
||||
margin-bottom: 0.5rem;
|
||||
.support-head {
|
||||
padding: 0 0.4rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 1.07rem;
|
||||
line-height: 1.07rem;
|
||||
.label{
|
||||
font-size: .4rem;
|
||||
.label {
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.external{
|
||||
.external {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
li{
|
||||
margin-left: .3rem;
|
||||
font-size: .35rem;
|
||||
li {
|
||||
margin-left: 0.3rem;
|
||||
font-size: 0.35rem;
|
||||
color: #666;
|
||||
}
|
||||
li.active{
|
||||
li.active {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper-container{
|
||||
.swiper-container {
|
||||
background: #f5f5f5;
|
||||
.picture, img{
|
||||
.picture,
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.monk-profile{
|
||||
padding: .4rem;
|
||||
.position{
|
||||
font-size: .5rem;
|
||||
padding-top: .2rem;
|
||||
color: #19282E;
|
||||
.monk-profile {
|
||||
padding: 0.4rem;
|
||||
.position {
|
||||
font-size: 0.5rem;
|
||||
padding-top: 0.2rem;
|
||||
color: #19282e;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.introduction{
|
||||
font-size: .37rem;
|
||||
margin-top: .4rem;
|
||||
.introduction {
|
||||
font-size: 0.37rem;
|
||||
margin-top: 0.4rem;
|
||||
line-height: 1.3;
|
||||
text-align: justify;
|
||||
color: #666;
|
||||
}
|
||||
.bar{
|
||||
margin-top: .27rem;
|
||||
.bar {
|
||||
margin-top: 0.27rem;
|
||||
}
|
||||
.status{
|
||||
padding: .2rem .3rem;
|
||||
.status {
|
||||
padding: 0.2rem 0.3rem;
|
||||
background: orange;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
border-radius: .04rem;
|
||||
margin-right: .3rem;
|
||||
font-size: .3rem;
|
||||
border-radius: 0.04rem;
|
||||
margin-right: 0.3rem;
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
span{
|
||||
span {
|
||||
color: #666;
|
||||
font-size: .28rem;
|
||||
font-size: 0.28rem;
|
||||
}
|
||||
}
|
||||
.temple-info{
|
||||
.temple-info {
|
||||
border-top: 1px solid #ddd;
|
||||
padding: .3rem .4rem;
|
||||
padding: 0.3rem 0.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.temple-img{
|
||||
.temple-img {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 1rem;
|
||||
margin-right: .3rem;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
.temple-name{
|
||||
.temple-name {
|
||||
flex: 1;
|
||||
.name{
|
||||
font-size: .35rem;
|
||||
.name {
|
||||
font-size: 0.35rem;
|
||||
color: #333;
|
||||
}
|
||||
.visitor{
|
||||
.visitor {
|
||||
color: #666;
|
||||
font-size: .3rem;
|
||||
margin-top: .2rem;
|
||||
font-size: 0.3rem;
|
||||
margin-top: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail-button-group{
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-top: .01rem solid #ddd;
|
||||
padding: .3rem;
|
||||
|
||||
}
|
||||
.merit-button{
|
||||
.detail-button-group {
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
border-top: 0.01rem solid #ddd;
|
||||
padding: 0.3rem;
|
||||
}
|
||||
.merit-button {
|
||||
display: block;
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
height: 1.2rem;
|
||||
font-size: .37rem;
|
||||
font-size: 0.37rem;
|
||||
min-width: 60%;
|
||||
padding: 0 .53rem;
|
||||
margin-top: .3rem;
|
||||
padding: 0 0.53rem;
|
||||
margin-top: 0.3rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border: .01rem solid $primary-color;
|
||||
border-radius: .13rem;
|
||||
margin-bottom: .3rem;
|
||||
border: 0.01rem solid $primary-color;
|
||||
border-radius: 0.13rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.caret-spec{
|
||||
.head{
|
||||
.caret-spec {
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: .4rem;
|
||||
padding: .4rem;
|
||||
font-size: 0.4rem;
|
||||
padding: 0.4rem;
|
||||
align-items: center;
|
||||
margin-top: .13rem;
|
||||
.iconfont{
|
||||
font-size: .7rem;
|
||||
margin-top: 0.13rem;
|
||||
.iconfont {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.step-inline{
|
||||
.step-inline {
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
font-size: .35rem;
|
||||
li{
|
||||
font-size: 0.35rem;
|
||||
li {
|
||||
display: inline-block;
|
||||
& ~ li:before{
|
||||
content: '-';
|
||||
padding: 0 .1rem;
|
||||
& ~ li:before {
|
||||
content: "-";
|
||||
padding: 0 0.1rem;
|
||||
}
|
||||
|
||||
}
|
||||
li.current{
|
||||
li.current {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auto-donate-time{
|
||||
padding: .4rem ;
|
||||
margin-top: .4rem;
|
||||
|
||||
.auto-donate-time {
|
||||
padding: 0.4rem;
|
||||
margin-top: 0.4rem;
|
||||
margin-bottom: 1rem;
|
||||
.donate{
|
||||
.label{
|
||||
font-size: .4rem;
|
||||
.donate {
|
||||
.label {
|
||||
font-size: 0.4rem;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.time-cycle{
|
||||
.time-cycle {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
.unit{
|
||||
font-size: .3rem;
|
||||
.unit {
|
||||
font-size: 0.3rem;
|
||||
color: #666;
|
||||
padding-left: .2rem;
|
||||
padding-left: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.next-group{
|
||||
.next-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: .2rem .4rem ;
|
||||
padding: 0.2rem 0.4rem;
|
||||
background: white;
|
||||
align-items: center;
|
||||
border-top: 1px solid #ededed;
|
||||
.total{
|
||||
font-size: .4rem;
|
||||
em{
|
||||
.total {
|
||||
font-size: 0.4rem;
|
||||
em {
|
||||
color: $primary-color;
|
||||
font-size: .4rem;
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.next{
|
||||
font-size: .4rem;
|
||||
padding: .3rem 1rem;
|
||||
.next {
|
||||
font-size: 0.4rem;
|
||||
padding: 0.3rem 1rem;
|
||||
background: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
color: white;
|
||||
border-radius: .1rem;
|
||||
border-radius: 0.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user