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.
929 lines
22 KiB
929 lines
22 KiB
<template>
|
|
<view
|
|
class="scenic_warp"
|
|
:class="showNotice == false ? 'scenic_warp' : 'scenic_warp active'"
|
|
>
|
|
<!-- 轮播图 -->
|
|
<view class="mmd_scol">
|
|
<view v-if="!showPic" class="video-box">
|
|
<!-- :poster="info.videopath" 视频封面 -->
|
|
<video
|
|
id="myVideo"
|
|
:src="videoSrc"
|
|
@error="videoErrorCallback"
|
|
:controls="false"
|
|
></video>
|
|
</view>
|
|
<view class="uni-margin-wrap" v-if="showPic">
|
|
<swiper
|
|
class="swiper_jqu"
|
|
:indicator-dots="indicatorDots_sce"
|
|
:autoplay="autoplay_sce"
|
|
:interval="interval_sce"
|
|
:duration="duration_sce"
|
|
>
|
|
<swiper-item v-for="(item, index) in pic_list" :key="index">
|
|
<view class="">
|
|
<image :src="item" mode="aspectFill" class="swiper_tup br_radius"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="picVdeo">
|
|
<view
|
|
:class="['tab-btn', showPic == false ? 'curr' : '']"
|
|
@click="showPic = false"
|
|
>视频</view
|
|
>
|
|
<view :class="['tab-btn', showPic == true ? 'curr' : '']" @click="showPic = true"
|
|
>图片</view
|
|
>
|
|
</view>
|
|
<view class="glass-container"></view>
|
|
</view>
|
|
|
|
<view class="info-card">
|
|
<view class="cur-input">
|
|
<view class="senice-name-box">
|
|
<view class="senice-name">
|
|
{{ info.sname }}
|
|
</view>
|
|
<view class="dl_1">
|
|
<text class="sp-blue">{{ info.slevel }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="pub-right" @click="goJianJie"
|
|
>简介攻略<uni-icons type="right" size="13"></uni-icons
|
|
></view>
|
|
</view>
|
|
<view class="senice-charac" v-if="info.charac != null">
|
|
<view class="border sp-default" v-for="(item, index) in info.charac"
|
|
>{{ item }}
|
|
</view>
|
|
</view>
|
|
<view class="secdt_adr dly_flex">
|
|
<text class="w_adr">开放时间</text>
|
|
<text class="cot_adr">{{ info.businesstime }}</text>
|
|
</view>
|
|
<view class="dly_flex_c secdt_tck mt_1">
|
|
<view class="sec_name_unit">
|
|
<text class="cot_adr" style="margin-right: 20rpx">{{ info.saddress }}</text>
|
|
</view>
|
|
<view class="agn_right sec_whe_unit"
|
|
><button class="btn_com btn_daoh" @click="daohang">导航</button></view
|
|
>
|
|
</view>
|
|
</view>
|
|
<!-- 门票 -->
|
|
<view class="ticket-list-box mode_com mt_1">
|
|
<view
|
|
class="m-ticket-sort"
|
|
v-for="items in ticketList"
|
|
v-show="items.ticketList.length > 0"
|
|
>
|
|
<view class="m-sort-name">{{ items.sortName }}</view>
|
|
<view class="ticket-item" v-for="item in items.ticketList">
|
|
<view class="ticket-name">
|
|
<span>{{ item.ticketname }}</span>
|
|
<!-- <span class="ticket-type"></span> -->
|
|
</view>
|
|
<!-- <view class="ticket-tag"></view> -->
|
|
<view class="ticket-tips">
|
|
<view class="left">
|
|
查看购买须知<uni-icons color="#FF7F00" type="right" size="12"></uni-icons>
|
|
</view>
|
|
<view class="ticket-price"
|
|
>{{ item.settlementPrice | money }} <span class="m-danwei">元</span></view
|
|
>
|
|
</view>
|
|
<view class="btn-box">
|
|
<view class="m-btn" hover-class="m-btn-hover" @click="bookIt(item)"
|
|
>立即预定</view
|
|
>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 攻略 -->
|
|
<view class="mode_com mt_1 gl" v-if="wanleList.length > 0 && wanleList != undefined">
|
|
<text class="tit_com">附近玩乐</text>
|
|
<text v-if="wanleList.length == 0 || wanleList == undefined" class="mssj_adr"
|
|
>暂无数据</text
|
|
>
|
|
<view class="category-content">
|
|
<view class="product-item" v-for="(p_item, p_index) in wanleList">
|
|
<image class="product-img" :src="p_item.thumb"></image>
|
|
<view class="m-content">
|
|
<text class="product-title1">{{ p_item.cname }}</text>
|
|
<text class="product-title m-blue border blue-border">{{
|
|
p_item.slevel
|
|
}}</text>
|
|
<text class="product-title">{{ p_item.address }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<f-login></f-login>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapMutations } from "vuex";
|
|
import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
|
|
import uniRate from "@/components/uni-rate/uni-rate2.vue";
|
|
import uParse from "@/components/gaoyia-parse/parse.vue";
|
|
import aes from "@/common/aes.js";
|
|
export default {
|
|
components: {
|
|
uniRate,
|
|
uParse,
|
|
uniIcons,
|
|
},
|
|
onLoad(options) {
|
|
var that = this;
|
|
this.$util.getNetworkType(
|
|
function (res) {
|
|
if (res.networkType === "none") {
|
|
uni.showToast({
|
|
title: that.$param.netMsg,
|
|
icon: "none",
|
|
duration: 2000,
|
|
});
|
|
that.netType = false;
|
|
}
|
|
},
|
|
function () {
|
|
uni.showToast({
|
|
title: that.$param.netMsg,
|
|
icon: "none",
|
|
duration: 2000,
|
|
});
|
|
that.netType = false;
|
|
}
|
|
);
|
|
if (!that.netType) {
|
|
return;
|
|
}
|
|
this.$util.hideLoadingByTime();
|
|
let oMeta;
|
|
|
|
if (typeof document !== "undefined") {
|
|
oMeta = document.createElement("meta");
|
|
oMeta.httpEquiv = "Cache-Control";
|
|
oMeta.content = "no-cache, no-store, must-revalidate";
|
|
document.getElementsByTagName("head")[0].appendChild(oMeta);
|
|
} else {
|
|
// 微信小程序环境下的替代逻辑
|
|
// 例如使用微信小程序的 API
|
|
console.log("Running in WeChat Mini Program environment");
|
|
}
|
|
|
|
that.$util.saveOperatorLog(that, "SCENIC", options.guid);
|
|
//正常进入详情
|
|
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
mask: true,
|
|
});
|
|
this.guid = options.guid;
|
|
if (options.list != "" && options.list != null) {
|
|
const arr = JSON.parse(options.list).filter((item) => item.cid != this.guid);
|
|
if (arr.length <= 2) {
|
|
this.wanleList = arr;
|
|
} else {
|
|
this.wanleList = arr.slice(0, 2);
|
|
}
|
|
}
|
|
this.detailInfo(options.guid);
|
|
this.getIsShow();
|
|
// #ifdef H5
|
|
|
|
if (this.$wechat.isWechat()) {
|
|
this.isZb = false;
|
|
}
|
|
// #endif
|
|
},
|
|
onUnload() {},
|
|
onShow() {
|
|
this.param.page = 1;
|
|
},
|
|
onReady() {
|
|
// setTimeout(function() {
|
|
// uni.hideLoading();
|
|
// }, 500);
|
|
this.videoContext = uni.createVideoContext("myVideo");
|
|
},
|
|
data() {
|
|
return {
|
|
showPic: true,
|
|
videoContext: "",
|
|
wanleList: [],
|
|
|
|
guid: "",
|
|
indicatorDots_sce: false,
|
|
zhankai: 0,
|
|
shouqi: 1,
|
|
open: 0,
|
|
stop: 1,
|
|
autoplay_sce: true,
|
|
interval_sce: 4000,
|
|
duration_sce: 500,
|
|
pic_url: this.$config.ROOTPATH,
|
|
rootPaht: this.$config.ROOTPATH,
|
|
comments: [],
|
|
pic_list: [],
|
|
videoSrc: "",
|
|
info: {},
|
|
weather: {},
|
|
listDatas: [],
|
|
ticketList: [],
|
|
ticketSortList: [],
|
|
param: {
|
|
page: 1,
|
|
noData: !1,
|
|
loading: !1,
|
|
finished: !1,
|
|
},
|
|
peoplesnum: {},
|
|
logo: "",
|
|
soundlength: 0,
|
|
AudioContext: uni.createInnerAudioContext(),
|
|
isShow: true,
|
|
weatherImgUrl: "",
|
|
flag: true,
|
|
total: "00:00",
|
|
current: "--",
|
|
seektime: 0,
|
|
audioTime: 0,
|
|
isZb: true,
|
|
isShowBuy: "YES",
|
|
|
|
// // 门票
|
|
showNotice: false,
|
|
markers: [],
|
|
notice: "",
|
|
ticketSellprice: "",
|
|
ticketPrice: "",
|
|
suitid: "",
|
|
isspecial: "",
|
|
isToDingDanType: false,
|
|
tapDate: "",
|
|
showSever: false,
|
|
score: "", //评论分数 数据初始化
|
|
showContact: false,
|
|
sid: "",
|
|
scenicDetail: {},
|
|
isShowLink_st: "YES",
|
|
isShowFlow: false,
|
|
flowImg: "",
|
|
flowState: "",
|
|
flowStyle: "agn_center liu_txt amt_30",
|
|
netType: true,
|
|
scenicList: [],
|
|
};
|
|
},
|
|
watch: {
|
|
showPic: {
|
|
handler: function (value) {
|
|
if (value == true) {
|
|
this.videoContext.stop();
|
|
}
|
|
console.log(this.videoContext);
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
computed: {
|
|
...mapState(["PrimaryColor", "userInfo"]),
|
|
freeSpecsButtonBackground() {
|
|
return this.$u.colorToRgba(this.$u.rgbToHex(this.PrimaryColor), 0.75);
|
|
},
|
|
},
|
|
methods: {
|
|
bookIt(val) {
|
|
this.judgeLogin((resa) => {
|
|
const obj = {
|
|
mobile: this.userInfo.phone,
|
|
ticketId: val.id,
|
|
tenantId: this.info.controlInfo.cyjcScenicId,
|
|
};
|
|
const tenantId = this.info.controlInfo.cyjcScenicId;
|
|
console.log(
|
|
this.info.controlInfo.cyjcScenicId,
|
|
"this.info.controlInfo.cyjcScenicId"
|
|
);
|
|
if (val.buyticketlimit == 1) {
|
|
const ticket = encodeURIComponent(JSON.stringify(val));
|
|
uni.navigateTo({
|
|
url:
|
|
"/subPageC/bookTicket/bookTicket?ticket=" + ticket + "&tentId=" + tenantId,
|
|
});
|
|
} else {
|
|
this.$Request
|
|
.get(this.$config.isQuota, obj, null, null, false, false)
|
|
.then((res) => {
|
|
console.log(res, "是否有余票");
|
|
if (res.data > 0) {
|
|
const ticket = encodeURIComponent(JSON.stringify(val));
|
|
uni.navigateTo({
|
|
url:
|
|
"/subPageC/bookTicket/bookTicket?ticket=" +
|
|
ticket +
|
|
"&maxNum=" +
|
|
res.data +
|
|
"&tentId=" +
|
|
tenantId,
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: "超过购买上限",
|
|
icon: "none",
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
//门票分类
|
|
getTicketSortList(val) {
|
|
this.$Request
|
|
.get(this.$config.getTicketSortList, { tenantId: val }, null, null, false, false)
|
|
.then((res) => {
|
|
console.log(res, "门票分类");
|
|
this.ticketSortList = res.data;
|
|
this.getTicketList(val);
|
|
});
|
|
},
|
|
//门票列表
|
|
getTicketList(val) {
|
|
this.$Request
|
|
.get(
|
|
this.$config.getTicketList,
|
|
{
|
|
tenantId: val,
|
|
},
|
|
null,
|
|
null,
|
|
false,
|
|
false
|
|
)
|
|
.then((res) => {
|
|
console.log(res, "门票");
|
|
this.ticketList = res.data;
|
|
});
|
|
},
|
|
//攻略简介
|
|
goJianJie() {
|
|
const obj = {
|
|
playtime: this.info.playtime,
|
|
smobile: this.info.smobile,
|
|
tips: this.info.tips,
|
|
sdescribe: this.info.sdescribe,
|
|
};
|
|
const str = JSON.stringify(obj);
|
|
uni.navigateTo({
|
|
url: "/subPageA/scenic/gonglve/gonglve?data=" + encodeURIComponent(str),
|
|
});
|
|
},
|
|
|
|
getIsShow: function () {
|
|
this.$Request.post(this.$config.getYbsjSysParam, {}).then((res) => {
|
|
var d = res.data;
|
|
this.isShowBuy = d.is_show_buy;
|
|
});
|
|
},
|
|
detailInfo: function (guid) {
|
|
/* var that = this;
|
|
var data = {
|
|
key: this.$param.userkey+'_scenic_' + guid
|
|
};
|
|
this.$Request.post(this.$config.getRedisData, data).then(res => {
|
|
console.log("Redis景区")
|
|
console.log(res);
|
|
if(res.status == 200){
|
|
//所有的数据
|
|
var initData = res.data;
|
|
}else{ */
|
|
this.getScDetail(guid);
|
|
/* }
|
|
}); */
|
|
},
|
|
getScDetail: function (guid) {
|
|
var data = {
|
|
guid: guid,
|
|
userkey: this.$param.userkey,
|
|
};
|
|
this.$Request.post(this.$config.scenicDetial, data).then((res) => {
|
|
this.info = res.data;
|
|
// this.tickeTlist = res.data.ticketlist;
|
|
this.logo = this.$config.ROOTPATH + res.data.slogo;
|
|
var pic_list = res.data.imgList;
|
|
var videolist = res.data.videolist;
|
|
|
|
if (pic_list != null) {
|
|
for (var i = 0; i < pic_list.length; i++) {
|
|
pic_list[i] = "" + this.pic_url + pic_list[i];
|
|
}
|
|
}
|
|
|
|
if (videolist != null) {
|
|
this.videoSrc = this.pic_url + videolist[0];
|
|
}
|
|
|
|
if (res.data.videopath != "" && res.data.videopath != null) {
|
|
this.info.videopath = this.pic_url + res.data.videopath.split("#")[1];
|
|
}
|
|
|
|
this.pic_list = pic_list;
|
|
if (
|
|
res.data.controlInfo.cyjcScenicUuid != "" &&
|
|
res.data.controlInfo.cyjcScenicUuid != null
|
|
) {
|
|
//this.comment(res.data.controlInfo.cyjcScenicUuid);
|
|
if (res.data.controlInfo.isPeopleFlow == "YES") {
|
|
this.isShowFlow = true;
|
|
}
|
|
} else {
|
|
this.isShow = false;
|
|
}
|
|
|
|
if (res.data.charac != null && res.data.charac != "") {
|
|
if (res.data.charac.includes(",")) {
|
|
this.info.charac = res.data.charac.split(",");
|
|
} else {
|
|
this.info.charac = [res.data.charac];
|
|
}
|
|
} else {
|
|
this.info.charac = null;
|
|
}
|
|
this.getDuration(this.info.soundpath, res.data.sfunc);
|
|
|
|
this.getTicketList(this.info.controlInfo.cyjcScenicId);
|
|
uni.hideLoading();
|
|
});
|
|
},
|
|
|
|
getDuration: function (soundpath, dur) {
|
|
if (soundpath == "" || soundpath == null) {
|
|
this.total = "--";
|
|
} else {
|
|
this.total = this.$util.secsToStr(Number(dur));
|
|
this.AudioContext.autoplay = false;
|
|
this.AudioContext.src = this.$config.ROOTPATH + soundpath;
|
|
/* this.AudioContext.duration=Number(dur); */
|
|
}
|
|
},
|
|
daohang() {
|
|
uni.openLocation({
|
|
latitude: Number(this.info.lat),
|
|
longitude: Number(this.info.lng),
|
|
name: this.info.sname,
|
|
address: this.info.saddress,
|
|
complete: function (result) {
|
|
console.log(result);
|
|
},
|
|
});
|
|
// #ifdef H5
|
|
|
|
if (this.$wechat.isWechat()) {
|
|
var mapParam = {
|
|
latitude: this.info.lat,
|
|
longitude: this.info.lng,
|
|
scale: 18,
|
|
name: this.info.sname,
|
|
address: this.info.saddress,
|
|
};
|
|
this.$util.openLocation(mapParam);
|
|
return;
|
|
}
|
|
window.location.href =
|
|
"https://uri.amap.com/navigation?from=" +
|
|
this.$param.clng +
|
|
"," +
|
|
this.$param.clat +
|
|
",我的位置&to=" +
|
|
this.info.lng +
|
|
"," +
|
|
this.info.lat +
|
|
"," +
|
|
this.info.saddress +
|
|
"&mode=walk&src=sjz_uniapp&callnative=1";
|
|
// #endif
|
|
},
|
|
tel: function (tels) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: tels, //仅为示例
|
|
});
|
|
},
|
|
/**
|
|
* 拨打客服电话 函数
|
|
*/
|
|
getTel: function () {
|
|
uni.makePhoneCall({
|
|
phoneNumber: "0311-83886677",
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "/static/css/common.css";
|
|
@import "/subPageA/food/fooddetial/fooddetial.css";
|
|
@import "/subPageA/ceshiLive/destination.css";
|
|
@import url("/pages/index/index.css");
|
|
@import url("/subPageA/ceshiLive/scenicdetail.css");
|
|
@import url("/subPageA/scenic/scenicdetial/scenicdetial.css");
|
|
|
|
body {
|
|
background: #f6f7fb;
|
|
}
|
|
|
|
.liu_hui {
|
|
color: #cbcbcb !important;
|
|
}
|
|
|
|
.liu_green {
|
|
color: #07b800 !important;
|
|
}
|
|
|
|
.liu_red {
|
|
color: #ef0a0a !important;
|
|
}
|
|
|
|
.slider_sec {
|
|
width: 450rpx;
|
|
height: 100%;
|
|
}
|
|
|
|
.slider_sec slider {
|
|
width: 95%;
|
|
margin-left: 2%;
|
|
margin-right: 0;
|
|
margin-top: 10rpx;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* 景区门票 */
|
|
.active {
|
|
overflow: hidden;
|
|
/* height: 100vh !important; */
|
|
}
|
|
|
|
.dialog-mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.scenic_warp {
|
|
position: relative;
|
|
|
|
.cur-input {
|
|
color: #333;
|
|
}
|
|
|
|
.dl_1 {
|
|
color: #333;
|
|
}
|
|
|
|
/* This was made with GlassGenerator.netlify.app */
|
|
|
|
.glass-container {
|
|
width: 100%;
|
|
height: 100rpx;
|
|
position: absolute;
|
|
bottom: -70rpx;
|
|
left: 0;
|
|
z-index: 1;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 20px;
|
|
border-radius: 0px;
|
|
backdrop-filter: blur(20px);
|
|
background-image: linear-gradient(to bottom, transparent, #f5f5f5);
|
|
border: 0px rgba(255, 255, 255, 0.4) solid;
|
|
border-bottom: 0px rgba(40, 40, 40, 0.35) solid;
|
|
border-right: 0px rgba(40, 40, 40, 0.35) solid;
|
|
}
|
|
|
|
.mmd_scol {
|
|
position: relative;
|
|
|
|
.picVdeo {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
border-radius: 24rpx;
|
|
display: flex;
|
|
width: fit-content;
|
|
position: absolute;
|
|
bottom: 150rpx;
|
|
left: 50rpx;
|
|
z-index: 9;
|
|
|
|
.tab-btn {
|
|
transition: all ease-in-out 0.3s;
|
|
width: fit-content;
|
|
padding: 5rpx 20rpx;
|
|
color: #fff;
|
|
background-color: transparent;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.tab-btn.curr {
|
|
background-color: #fff;
|
|
border-radius: 24rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.video-box {
|
|
width: 100%;
|
|
height: 540rpx;
|
|
|
|
::v-deep #myVideo {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.uni-video-cover-duration {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.info-card {
|
|
position: relative;
|
|
z-index: 9;
|
|
top: -80rpx;
|
|
background: #ffffff;
|
|
border-radius: 20rpx;
|
|
margin: 0 24rpx;
|
|
padding: 40rpx 25rpx;
|
|
|
|
.cur-input {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.senice-name-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: start;
|
|
|
|
.senice-name {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: bold;
|
|
font-size: 44rpx;
|
|
color: #1b1b1b;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.secdt_adr {
|
|
margin-top: 12rpx;
|
|
|
|
.w_adr {
|
|
width: fit-content;
|
|
margin-right: 20rpx;
|
|
color: #1b1b1b;
|
|
}
|
|
}
|
|
|
|
.secdt_tck {
|
|
margin-top: 27rpx;
|
|
background-color: #fff;
|
|
padding: 0;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.agn_right {
|
|
width: fit-content;
|
|
|
|
.btn_daoh {
|
|
background: #f8f9fd;
|
|
border-radius: 28rpx;
|
|
color: #333;
|
|
position: relative;
|
|
padding-left: 40rpx;
|
|
}
|
|
|
|
.btn_daoh::before {
|
|
content: "";
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
position: absolute;
|
|
left: 10rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background-image: url("../../animg/daohang_ico.png");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.uni-margin-wrap {
|
|
.swiper_jqu {
|
|
height: 540rpx;
|
|
|
|
.swiper_tup {
|
|
height: 540rpx;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.uni-margin-wrap {
|
|
width: 100%;
|
|
}
|
|
|
|
/* 景区列表 图片背景色块填充*/
|
|
.category-content .product-item:nth-child(4n) .product-img {
|
|
background-color: #f2dedc !important;
|
|
}
|
|
|
|
.category-content .product-item:nth-child(4n + 1) .product-img {
|
|
background-color: #e6f2dc !important;
|
|
}
|
|
|
|
.category-content .product-item:nth-child(4n + 2) .product-img {
|
|
background-color: #dcf0f2 !important;
|
|
}
|
|
|
|
.category-content .product-item:nth-child(4n + 3) .product-img {
|
|
background-color: #e9dcf2 !important;
|
|
}
|
|
|
|
.category-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-flow: wrap;
|
|
padding-top: 30rpx;
|
|
margin: 0 20rpx;
|
|
|
|
justify-content: space-between;
|
|
|
|
.product-item {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: start;
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
.product-img {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
margin-bottom: 10rpx;
|
|
border-radius: 14rpx;
|
|
}
|
|
|
|
.m-content {
|
|
margin-left: 15rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.product-title1 {
|
|
font-size: 32rpx;
|
|
padding-bottom: 12rpx;
|
|
padding-top: 10rpx;
|
|
}
|
|
|
|
.product-title {
|
|
width: fit-content;
|
|
font-size: 24rpx;
|
|
padding: 3rpx 10rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.gl {
|
|
margin-top: -50rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.senice-charac {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.border {
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
|
|
.ticket-list-box {
|
|
margin-top: -80rpx;
|
|
padding-top: 40rpx;
|
|
padding: 50rpx 0;
|
|
|
|
.m-ticket-sort {
|
|
padding: 0 25rpx;
|
|
margin-bottom: 30rpx;
|
|
background-color: #fff;
|
|
padding-bottom: 30rpx;
|
|
|
|
.m-sort-name {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: #1b1b1b;
|
|
margin-bottom: 35rpx;
|
|
padding: 50rpx 20rpx 0;
|
|
}
|
|
|
|
.ticket-item {
|
|
background: #f8f9fd;
|
|
border-radius: 20rpx;
|
|
padding: 40rpx;
|
|
margin-bottom: 25rpx;
|
|
|
|
.ticket-name {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #1b1b1b;
|
|
|
|
.ticket-type {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #666666;
|
|
padding: 3rpx 5rpx;
|
|
border-radius: 8rpx;
|
|
border: 1px solid #e9e9e9;
|
|
}
|
|
}
|
|
|
|
.ticket-tag {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #0983ff;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.ticket-tips {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15rpx;
|
|
|
|
.left {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #ff7f00;
|
|
}
|
|
|
|
.ticket-price {
|
|
font-family: Source Han Sans SC;
|
|
font-weight: bold;
|
|
font-size: 38rpx;
|
|
color: #ff404c;
|
|
|
|
.m-danwei {
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-box {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.m-btn {
|
|
width: 160rpx;
|
|
height: 64rpx;
|
|
background: linear-gradient(-90deg, #0983ff, #57abff);
|
|
border-radius: 32rpx;
|
|
text-align: center;
|
|
line-height: 64rpx;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.m-btn-hover {
|
|
background: linear-gradient(-90deg, #57abff, #0983ff);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|