|
@@ -1,335 +1,406 @@
|
|
|
<template>
|
|
|
- <page-meta>
|
|
|
- <navigation-bar :title="filmList[filmId].name" background-color="#FFFFFF" front-color="#000000" />
|
|
|
- </page-meta>
|
|
|
- <view class="schedulelist">
|
|
|
- <loadSke :loading='listLoading'>
|
|
|
- <view class="des-box">
|
|
|
- <view class="address">
|
|
|
- {{cinemaName}}
|
|
|
- </view>
|
|
|
- <swiper class="swiper-box" :current="current" previous-margin='200rpx' next-margin='200rpx' @change='swiperChange'>
|
|
|
- <swiper-item v-for="(item,index) in scheduleListKey" :key='index' class="swiper-item">
|
|
|
- <image class="image" :class="{imgBig:current==index}" :src="filmList[item].pic" mode="heightFix" :draggable="false" />
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <view class="film-name">
|
|
|
- {{filmList[filmId].name}}
|
|
|
- </view>
|
|
|
- <view class="film-des">
|
|
|
- {{filmList[filmId].duration}}分钟 | {{filmList[filmId].filmTypes}} | {{filmList[filmId].cast}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <page-meta>
|
|
|
+ <navigation-bar
|
|
|
+ :title="filmList[filmId].name"
|
|
|
+ background-color="#FFFFFF"
|
|
|
+ front-color="#000000"
|
|
|
+ />
|
|
|
+ </page-meta>
|
|
|
+ <view class="schedulelist">
|
|
|
+ <loadSke :loading="listLoading">
|
|
|
+ <view class="des-box">
|
|
|
+ <view class="address">
|
|
|
+ {{ cinemaName }}
|
|
|
+ </view>
|
|
|
+ <swiper
|
|
|
+ class="swiper-box"
|
|
|
+ :current="current"
|
|
|
+ previous-margin="200rpx"
|
|
|
+ next-margin="200rpx"
|
|
|
+ @change="swiperChange"
|
|
|
+ >
|
|
|
+ <swiper-item
|
|
|
+ v-for="(item, index) in scheduleListKey"
|
|
|
+ :key="index"
|
|
|
+ class="swiper-item"
|
|
|
+ >
|
|
|
+ <image
|
|
|
+ class="image"
|
|
|
+ :class="{ imgBig: current == index }"
|
|
|
+ :src="filmList[item].pic"
|
|
|
+ mode="heightFix"
|
|
|
+ :draggable="false"
|
|
|
+ />
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <view class="film-name">
|
|
|
+ {{ filmList[filmId].name }}
|
|
|
+ </view>
|
|
|
+ <view class="film-des">
|
|
|
+ {{ filmList[filmId].duration }}分钟 |
|
|
|
+ {{ filmList[filmId].filmTypes }} | {{ filmList[filmId].cast }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
-
|
|
|
- <view class="schedule-box">
|
|
|
- <van-tabs :active='tabActive' :swipe-threshold='3' animated swipeable id="tabs" @change='tabsChange'>
|
|
|
- <van-tab class='schedule-tab' :title="$utils.getDay(index)+' '+index.slice(5)" v-for='(item,index) in scheduleItem'
|
|
|
- :key='index'>
|
|
|
- <view v-for="(sonItem,sonIndex) in item" :key='sonItem.showId' class="schedule-des" @click="clickBuy(sonItem)">
|
|
|
- <view class="left-box">
|
|
|
- <view class="item-box">
|
|
|
- <text>{{sonItem.showTime.slice(11,16)}}</text>
|
|
|
- <text class="bottom-text">{{sonItem.duration}}分钟</text>
|
|
|
- </view>
|
|
|
- <view class="type-box">
|
|
|
- <text>{{sonItem.planType}}</text>
|
|
|
- <text class="bottom-text">{{sonItem.hallName}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="right-box">
|
|
|
- <view class="price-box">
|
|
|
- <text>{{(sonItem.netPrice/100*(sonItem.netPrice>3900?discountRule.upDiscountRate:discountRule.downDiscountRate)*filmDiscount).toFixed(2)}}元</text>
|
|
|
- <text class="bottom-text old-price">{{sonItem.netPrice/100}}元</text>
|
|
|
- </view>
|
|
|
- <button v-if='discontinued(sonItem.stopSellTime)'>购 票</button>
|
|
|
- <button v-else type="default" style="background: linear-gradient(90deg, #c0c0c0, #c0c0c0, #c0c0c0);">停 售</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </van-tab>
|
|
|
- </van-tabs>
|
|
|
- </view>
|
|
|
- </loadSke>
|
|
|
- </view>
|
|
|
+ <view class="schedule-box">
|
|
|
+ <van-tabs
|
|
|
+ :active="tabActive"
|
|
|
+ :swipe-threshold="3"
|
|
|
+ animated
|
|
|
+ swipeable
|
|
|
+ id="tabs"
|
|
|
+ @change="tabsChange"
|
|
|
+ >
|
|
|
+ <van-tab
|
|
|
+ class="schedule-tab"
|
|
|
+ :title="$utils.getDay(index) + ' ' + index.slice(5)"
|
|
|
+ v-for="(item, index) in scheduleItem"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ v-for="(sonItem, sonIndex) in item"
|
|
|
+ :key="sonItem.showId"
|
|
|
+ class="schedule-des"
|
|
|
+ @click="clickBuy(sonItem)"
|
|
|
+ >
|
|
|
+ <view class="left-box">
|
|
|
+ <view class="item-box">
|
|
|
+ <text>{{ sonItem.showTime.slice(11, 16) }}</text>
|
|
|
+ <text class="bottom-text">{{ sonItem.duration }}分钟</text>
|
|
|
+ </view>
|
|
|
+ <view class="type-box">
|
|
|
+ <text>{{ sonItem.planType }}</text>
|
|
|
+ <text class="bottom-text">{{ sonItem.hallName }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="right-box">
|
|
|
+ <view class="price-box">
|
|
|
+ <text
|
|
|
+ >{{
|
|
|
+ (
|
|
|
+ (sonItem.netPrice / 100) *
|
|
|
+ (sonItem.netPrice > 3900
|
|
|
+ ? discountRule.upDiscountRate
|
|
|
+ : discountRule.downDiscountRate) *
|
|
|
+ filmDiscount
|
|
|
+ ).toFixed(2)
|
|
|
+ }}元</text
|
|
|
+ >
|
|
|
+ <text class="bottom-text old-price"
|
|
|
+ >{{ sonItem.netPrice / 100 }}元</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <button v-if="discontinued(sonItem.stopSellTime)">购 票</button>
|
|
|
+ <button
|
|
|
+ v-else
|
|
|
+ type="default"
|
|
|
+ style="
|
|
|
+ background: linear-gradient(
|
|
|
+ 90deg,
|
|
|
+ #c0c0c0,
|
|
|
+ #c0c0c0,
|
|
|
+ #c0c0c0
|
|
|
+ );
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 停 售
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ </view>
|
|
|
+ </loadSke>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data: () => ({
|
|
|
- listLoading: true,
|
|
|
- tabActive: 0,
|
|
|
- current: 0,
|
|
|
- cinemaId: null,
|
|
|
- filmId: null,
|
|
|
- cinemaName: '',
|
|
|
- scheduleList: {},
|
|
|
- scheduleListKey: null,
|
|
|
- discountRule: {},
|
|
|
- scheduleItem: {}
|
|
|
- }),
|
|
|
- computed: {
|
|
|
- filmList() {
|
|
|
- let list = {}
|
|
|
- this.$store.state.cinema.filmList.map((val) => {
|
|
|
- list[val.filmId] = val
|
|
|
- })
|
|
|
- return list;
|
|
|
- },
|
|
|
- filmDiscount() {
|
|
|
- return this.$store.state.cinema.filmDiscount;
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad: function(option) {
|
|
|
- this.cinemaId = option.cinemaId;
|
|
|
- this.filmId = option.filmId;
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.init()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- clickBuy(item) {
|
|
|
- let flag = this.discontinued(item.stopSellTime)
|
|
|
- if (flag) {
|
|
|
- this.$utils.goPage(`/pages/cinema/selectseat`, null, {
|
|
|
- showItem: item
|
|
|
- })
|
|
|
- }
|
|
|
- return
|
|
|
- },
|
|
|
- init() {
|
|
|
- this.listLoading = true
|
|
|
- this.$api.cinema.getScheduleList({
|
|
|
- cinemaId: this.cinemaId
|
|
|
- }).then(res => {
|
|
|
- this.scheduleList = {}
|
|
|
- this.discountRule = res.data.data.discountRule
|
|
|
- this.$store.commit('SET_DISCOUNTRULE', res.data.data.discountRule)
|
|
|
- this.cinemaName = res.data.data.list[0].cinemaName
|
|
|
- res.data.data.list.sort((a, b) => {
|
|
|
- return this.$utils.dayjs(a.showTime).isAfter(b.showTime) ? 1 : -1
|
|
|
- })
|
|
|
- res.data.data.list.forEach((val) => {
|
|
|
- this.scheduleList[val.filmId] || (this.scheduleList[val.filmId] = {})
|
|
|
- this.scheduleList[val.filmId][val.showDate] || (this.scheduleList[val.filmId][val.showDate] = [])
|
|
|
- this.scheduleList[val.filmId][val.showDate].push(val)
|
|
|
- })
|
|
|
- this.scheduleListKey = Object.keys(this.scheduleList);
|
|
|
- //定位影片位置
|
|
|
- (this.filmId == 'undefined') && (this.filmId = this.scheduleListKey[0])
|
|
|
- this.scheduleItem = this.scheduleList[this.filmId]
|
|
|
- this.current = this.scheduleListKey.indexOf(this.filmId)
|
|
|
- this.listLoading = false
|
|
|
- setTimeout(() => {
|
|
|
- this.selectComponent('#tabs').resize();
|
|
|
- }, 500)
|
|
|
- })
|
|
|
- },
|
|
|
- discontinued(date) {
|
|
|
- let flag = (new Date(date.replace(/-/g, "/")).getTime() - new Date().getTime() - 1000 * 60 * 60) > 0
|
|
|
- return flag
|
|
|
- },
|
|
|
- swiperChange(e) {
|
|
|
- this.current = e.detail.current
|
|
|
- this.filmId = this.scheduleListKey[this.current]
|
|
|
- this.scheduleItem = {}
|
|
|
- this.$nextTick(() => {
|
|
|
- this.scheduleItem = this.scheduleList[this.filmId]
|
|
|
- this.$nextTick(() => {
|
|
|
- this.tabActive = 0
|
|
|
- this.selectComponent('#tabs').resize();
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- tabsChange(e) {
|
|
|
- this.tabActive = e.detail.index
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+export default {
|
|
|
+ data: () => ({
|
|
|
+ listLoading: true,
|
|
|
+ tabActive: 0,
|
|
|
+ current: 0,
|
|
|
+ cinemaId: null,
|
|
|
+ filmId: null,
|
|
|
+ cinemaName: "",
|
|
|
+ scheduleList: {},
|
|
|
+ scheduleListKey: null,
|
|
|
+ discountRule: {},
|
|
|
+ scheduleItem: {},
|
|
|
+ }),
|
|
|
+ computed: {
|
|
|
+ filmList() {
|
|
|
+ let list = {};
|
|
|
+ this.$store.state.cinema.filmList.map((val) => {
|
|
|
+ list[val.filmId] = val;
|
|
|
+ });
|
|
|
+ return list;
|
|
|
+ },
|
|
|
+ filmDiscount() {
|
|
|
+ return this.$store.state.cinema.filmDiscount;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad: function (option) {
|
|
|
+ this.cinemaId = option.cinemaId;
|
|
|
+ this.filmId = option.filmId;
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ clickBuy(item) {
|
|
|
+ let flag = this.discontinued(item.stopSellTime);
|
|
|
+ if (flag) {
|
|
|
+ this.$utils.goPage(`/pages/cinema/selectseat`, null, {
|
|
|
+ showItem: item,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.listLoading = true;
|
|
|
+ this.$api.cinema
|
|
|
+ .getScheduleList({
|
|
|
+ cinemaId: this.cinemaId,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.scheduleList = {};
|
|
|
+ this.discountRule = res.data.data.discountRule;
|
|
|
+ this.$store.commit("SET_DISCOUNTRULE", res.data.data.discountRule);
|
|
|
+ this.cinemaName = res.data.data.list[0].cinemaName;
|
|
|
+ res.data.data.list.sort((a, b) => {
|
|
|
+ return this.$utils.dayjs(a.showTime).isAfter(b.showTime) ? 1 : -1;
|
|
|
+ });
|
|
|
+ res.data.data.list.forEach((val) => {
|
|
|
+ this.scheduleList[val.filmId] ||
|
|
|
+ (this.scheduleList[val.filmId] = {});
|
|
|
+ this.scheduleList[val.filmId][val.showDate] ||
|
|
|
+ (this.scheduleList[val.filmId][val.showDate] = []);
|
|
|
+ this.scheduleList[val.filmId][val.showDate].push(val);
|
|
|
+ });
|
|
|
+ this.scheduleListKey = Object.keys(this.scheduleList);
|
|
|
+ //定位影片位置
|
|
|
+ this.filmId == "undefined" && (this.filmId = this.scheduleListKey[0]);
|
|
|
+ this.scheduleItem = this.scheduleList[this.filmId];
|
|
|
+ this.current = this.scheduleListKey.indexOf(this.filmId);
|
|
|
+ this.listLoading = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.selectComponent("#tabs").resize();
|
|
|
+ }, 500);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ discontinued(date) {
|
|
|
+ let flag =
|
|
|
+ new Date(date.replace(/-/g, "/")).getTime() -
|
|
|
+ new Date().getTime() -
|
|
|
+ 1000 * 60 * 60 >
|
|
|
+ 0;
|
|
|
+ return flag;
|
|
|
+ },
|
|
|
+ swiperChange(e) {
|
|
|
+ this.current = e.detail.current;
|
|
|
+ this.filmId = this.scheduleListKey[this.current];
|
|
|
+ this.scheduleItem = {};
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.scheduleItem = this.scheduleList[this.filmId];
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.tabActive = 0;
|
|
|
+ this.selectComponent("#tabs").resize();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ tabsChange(e) {
|
|
|
+ this.tabActive = e.detail.index;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .button-box {
|
|
|
- width: 100%;
|
|
|
- height: 100rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: stretch;
|
|
|
- background-color: #ffffff;
|
|
|
+.button-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: stretch;
|
|
|
+ background-color: #ffffff;
|
|
|
|
|
|
- .problem-type {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+ .problem-type {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
- .active {
|
|
|
- border-bottom: 2px solid red;
|
|
|
- }
|
|
|
- }
|
|
|
+ .active {
|
|
|
+ border-bottom: 2px solid red;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .des-box {
|
|
|
- background-image: url(https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/filmBg.png);
|
|
|
- padding: 35rpx 30rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
- height: 690rpx;
|
|
|
+.des-box {
|
|
|
+ background-image: url(https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/filmBg.png);
|
|
|
+ padding: 35rpx 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ height: 690rpx;
|
|
|
|
|
|
- .address {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
+ .address {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
|
|
|
- .swiper-box {
|
|
|
- margin: auto;
|
|
|
- margin-top: 60rpx;
|
|
|
- padding: 0 45rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
- height: 270rpx;
|
|
|
+ .swiper-box {
|
|
|
+ margin: auto;
|
|
|
+ margin-top: 60rpx;
|
|
|
+ padding: 0 45rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ height: 270rpx;
|
|
|
|
|
|
- .swiper-item {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+ .swiper-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
- .image {
|
|
|
- height: 86%;
|
|
|
- }
|
|
|
+ .image {
|
|
|
+ height: 86%;
|
|
|
+ }
|
|
|
|
|
|
- .imgBig {
|
|
|
- height: 100% !important;
|
|
|
- }
|
|
|
- }
|
|
|
+ .imgBig {
|
|
|
+ height: 100% !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .film-name {
|
|
|
- margin-top: 53rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
+ .film-name {
|
|
|
+ margin-top: 53rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
|
|
|
- .film-des {
|
|
|
- margin-top: 19rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 22rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
- }
|
|
|
+ .film-des {
|
|
|
+ margin-top: 19rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .schedule-box {
|
|
|
- width: 100vw;
|
|
|
- min-height: calc(100vh - 690rpx + 122rpx - 10px - env(safe-area-inset-bottom)/2);
|
|
|
- padding-bottom: calc(10px + env(safe-area-inset-bottom)/2);
|
|
|
- background-color: #FFFFFF;
|
|
|
- border-radius: 50rpx 50rpx 0px 0px;
|
|
|
- margin-top: -122rpx;
|
|
|
- overflow: hidden;
|
|
|
+.schedule-box {
|
|
|
+ width: 100vw;
|
|
|
+ min-height: calc(
|
|
|
+ 100vh - 690rpx + 122rpx - 10px - env(safe-area-inset-bottom) / 2
|
|
|
+ );
|
|
|
+ padding-bottom: calc(10px + env(safe-area-inset-bottom) / 2);
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 50rpx 50rpx 0px 0px;
|
|
|
+ margin-top: -122rpx;
|
|
|
+ overflow: hidden;
|
|
|
|
|
|
- .schedule-tab {
|
|
|
- overflow-y: auto;
|
|
|
- }
|
|
|
+ .schedule-tab {
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
|
|
|
- .schedule-des {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 0 30rpx;
|
|
|
- margin-top: 50rpx;
|
|
|
+ .schedule-des {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ margin-top: 50rpx;
|
|
|
|
|
|
- .bottom-text {
|
|
|
- font-size: 22rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #999999;
|
|
|
- width: 100rpx;
|
|
|
- text-align: center;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
+ .bottom-text {
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ width: 100rpx;
|
|
|
+ text-align: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
|
|
|
- .left-box {
|
|
|
- width: 50%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: stretch;
|
|
|
+ .left-box {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: stretch;
|
|
|
|
|
|
- .item-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ .item-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- &:first-child {
|
|
|
- font-size: 40rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #0F0404;
|
|
|
- }
|
|
|
- }
|
|
|
+ &:first-child {
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #0f0404;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .type-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ .type-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- &:first-child {
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #0F0404;
|
|
|
- }
|
|
|
+ &:first-child {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #0f0404;
|
|
|
+ }
|
|
|
|
|
|
- :last-child {
|
|
|
- width: 220rpx !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ :last-child {
|
|
|
+ width: 220rpx !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .right-box {
|
|
|
- width: 45%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
+ .right-box {
|
|
|
+ width: 45%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .price-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
+ .price-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- &:first-child {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #E31919;
|
|
|
- }
|
|
|
+ &:first-child {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #e31919;
|
|
|
+ }
|
|
|
|
|
|
- .old-price {
|
|
|
- text-decoration: line-through;
|
|
|
- }
|
|
|
- }
|
|
|
+ .old-price {
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- button {
|
|
|
- margin: 0;
|
|
|
- width: 126rpx;
|
|
|
- height: 60rpx;
|
|
|
- background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
|
|
|
- border-radius: 30rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
- white-space: nowrap;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+ button {
|
|
|
+ margin: 0;
|
|
|
+ width: 126rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background: linear-gradient(90deg, #e31818, #ed3e24, #ed4f24);
|
|
|
+ border-radius: 30rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ white-space: nowrap;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|