|
- <template>
- <div class="page">
- <div class="commoditylIst" ref="scrollContainerRef" @wheel="handleWheel">
- <div class="item" v-for="item in packageList" :key="item.typeDesc">
- <!-- 遮罩层 -->
- <!-- <div class="mask" v-if="item.type != 1">
- <el-icon><i-ep-Lock /></el-icon>
- </div> -->
- <!-- clickPayDialog(item) getOrderDetail-->
- <div @click="clickPayDialog(item)">
- <div class="line" :style="`background-color:${item.color} ;`"></div>
- <div class="info">
- <!-- 商品信息 -->
- <div class="content">
- <div class="titleBox">
- <div class="title">
- {{ item.title }}
- </div>
- </div>
- <div class="money">
- <span class="price">{{
- item.sellPriceRmb
- }} ¥</span
- >/ <span style="text-decoration:line-through;">原价{{ item.priceRmb }}</span>
- </div>
- <div class="time">
- 币值<span>{{ item.glod }}</span
- >
- </div>
- <div class="button" :style="`background-color: #f3af00 ;`">
- 方案选择
- </div>
- <div class="button" @click="createOrder(item)" :style="`background-color: #f3af00 ;`">
- 创建订单
- </div>
- <!-- <div
- v-if="item.type != 1"
- class="button"
- :style="`background-color:${item.color} ;`"
- >
- {{ $t("createVideo.comingSoon") }}
- </div>
- <div
- v-else
- class="button"
- :style="`background-color:${item.color} ;`"
- >
- {{ $t("shop.selectPlan") }}
- </div> -->
- </div>
- <!-- 商品权益 -->
- <div class="authority">
- <div v-html="item.detail"></div>
- <!-- <div class="authority-item">
- {{ $t("shop.InviteGetscore") }}:
-
- <span>
- <i>{{ item.inviteUserCredit }}</i
- >{{ $t("shop.score") }}</span
- >
- </div>
- <div class="authority-item">
- {{ $t("shop.createVideoPrice") }}:<span
- ><i>{{ item.videoPrice }}</i
- >{{ $t("shop.score") }}</span
- >
- </div>
- <div class="authority-item">
- {{ $t("shop.AIGeneratesPhotoPrices") }}:<span
- ><i>{{ item.photoPrice }}</i
- >{{ $t("shop.score") }}</span
- >
- </div>
- <div class="authority-item">
- {{ $t("shop.UnitChargeDuration") }}:<span
- ><i>{{ item.chargeTime }}</i
- >{{ $t("shop.second") }}</span
- >
- </div> -->
-
- <!-- <div class="authority-item">
- {{ $t("shop.Language") }}:<span
- ><i>{{ item.userPackageDetails[0].languageDesc }}</i></span
- >
- </div>
- <div class="authority-item">
- {{ $t("shop.sound") }}:<span
- ><i>{{ item.userPackageDetails[0].soundDesc }}</i></span
- >
- </div>
- <div class="authority-item">
- {{ $t("shop.IndividualVideoDuration") }}:<span
- ><i>{{ item.userPackageDetails[0].videoTime }}</i
- >{{ $t("shop.second") }}</span
- >
- </div>
- <div class="authority-item">
- {{ $t("shop.Watermark") }}:<span>{{
- item.userPackageDetails[0].aiPortrait == 0
- ? $t("shop.yes")
- : $t("shop.no")
- }}</span>
- </div>
- <div class="authority-item">
- {{ $t("shop.AIGeneratedPortrait") }}:<span>{{
- item.userPackageDetails[0].aiPortrait == 0
- ? $t("shop.no")
- : $t("shop.yes")
- }}</span>
- </div>
- <div class="authority-item">
- {{ $t("shop.PhotoSinging") }}:<span>{{
- item.userPackageDetails[0].photoSing == 0
- ? $t("shop.no")
- : $t("shop.yes")
- }}</span>
- </div>
- <div class="authority-item">
- {{ $t("shop.AIGeneratedText") }}:<span
- ><i>{{ item.userPackageDetails[0].aiCreateTime }}</i></span
- >
- </div>
- <div class="authority-item">
- {{ $t("shop.VideoResolution") }}:<span>{{
- item.userPackageDetails[0].resolutionRatioDesc
- }}</span>
- </div> -->
- <!-- <div class="authority-item">
- {{ $t("shop.DigitalPersonTemplate") }}:{{
- item.userPackageDetails[0].humanTemplateDesc
- }}
- </div> -->
- <!-- <div
- class="authority-item"
- v-for="items in item.authority"
- :key="items"
- >
- <span>✔</span>{{ items }}
- </div> -->
- </div>
- </div>
- </div>
- </div>
- <!-- 企业版 -->
- <div class="item" @click="showTalkUsDialog = true">
- <!-- 遮罩层 -->
- <div class="mask" v-if="false">
- <el-icon><i-ep-Lock /></el-icon>
- </div>
- <div class="line" :style="`background-color:#000 ;`"></div>
- <div class="info">
- <div class="content" style="border-bottom: none">
- <div class="titleBox">
- <div class="title">
- {{ $t("shop.Ent") }}
- </div>
- </div>
- <!-- 描述 -->
- <div class="description">
- <div>
- {{ lanChange == "zh-cn" ? "所有权限" : "All Pro Benefits" }}
- </div>
- <div>
- {{
- lanChange == "zh-cn" ? "克隆数字双元" : "Clone DigItal Double"
- }}
- </div>
- <div>
- {{
- lanChange == "zh-cn" ? "专属定制头像" : "Customized Avatar"
- }}
- </div>
- <div>
- {{
- lanChange == "zh-cn"
- ? "专属定制声纹"
- : "Customized Voiceprint"
- }}
- </div>
- </div>
- <div v-if="true" class="button" :style="`background-color:#000 ;`">
- {{ $t("shop.talkUs") }}
- </div>
- <div v-else class="button" :style="`background-color:#000 ;`">
- {{ $t("shop.talkUs") }}
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 对话框 v-if="false"-->
- <el-dialog v-model="showPayDialog" width="60%" center>
- <div class="payDialog">
- <div class="left">
- <!-- <div class="title">{{ $t(presentItme.value.title) }}</div> -->
- <div class="title">{{ $t(presentItme.value.typeDesc) }}</div>
- <div class="money">
- <span class="price">{{
- lanChange == "zh-cn"
- ? presentItme.value.rmb + "¥"
- : presentItme.value.dollar + "$"
- }}</span
- >/{{ presentItme.value.validityDuration }}{{ $t("shop.day") }}
- </div>
- <div class="time">
- <span>{{ presentItme.value.credit }}</span
- >{{ $t("shop.score") }}
- </div>
- <!-- 套餐内容 -->
- <div class="authority">
- <div class="authority-item">
- {{ $t("shop.InviteGetscore") }}:
- <span>
- <i>{{ presentItme.value.inviteUserCredit }}</i
- >{{ $t("shop.score") }}</span
- >
- </div>
- <div class="authority-item">
- {{ $t("shop.createVideoPrice") }}:<span
- ><i>{{ presentItme.value.videoPrice }}</i
- >{{ $t("shop.score") }}</span
- >
- </div>
- <div class="authority-item">
- {{ $t("shop.AIGeneratesPhotoPrices") }}:<span
- ><i>{{ presentItme.value.photoPrice }}</i
- >{{ $t("shop.score") }}</span
- >
- </div>
- <div class="authority-item">
- {{ $t("shop.UnitChargeDuration") }}:<span
- ><i>{{ presentItme.value.chargeTime }}</i
- >{{ $t("shop.second") }}</span
- >
- </div>
-
- <div class="authority-item">
- {{ $t("shop.Language") }}:<span
- ><i>{{
- presentItme.value.userPackageDetails[0].languageDesc
- }}</i></span
- >
- </div>
- <div class="authority-item">
- {{ $t("shop.sound") }}:<span
- ><i>{{
- presentItme.value.userPackageDetails[0].soundDesc
- }}</i></span
- >
- </div>
- <div class="authority-item">
- {{ $t("shop.IndividualVideoDuration") }}:<span
- ><i>{{ presentItme.value.userPackageDetails[0].videoTime }}</i
- >{{ $t("shop.second") }}</span
- >
- </div>
- <div class="authority-item">
- {{ $t("shop.Watermark") }}:<span>{{
- presentItme.value.userPackageDetails[0].aiPortrait == 0
- ? $t("shop.yes")
- : $t("shop.no")
- }}</span>
- </div>
- <div class="authority-item">
- {{ $t("shop.AIGeneratedPortrait") }}:<span>{{
- presentItme.value.userPackageDetails[0].aiPortrait == 0
- ? $t("shop.no")
- : $t("shop.yes")
- }}</span>
- </div>
- <div class="authority-item">
- {{ $t("shop.PhotoSinging") }}:<span>{{
- presentItme.value.userPackageDetails[0].photoSing == 0
- ? $t("shop.no")
- : $t("shop.yes")
- }}</span>
- </div>
- <div class="authority-item">
- {{ $t("shop.AIGeneratedText") }}:<span
- ><i>{{
- presentItme.value.userPackageDetails[0].aiCreateTime
- }}</i></span
- >
- </div>
- <div class="authority-item">
- {{ $t("shop.VideoResolution") }}:<span>{{
- presentItme.value.userPackageDetails[0].resolutionRatioDesc
- }}</span>
- </div>
- </div>
- </div>
- <div class="right">
- <div
- style="background-color: #07c160; cursor: pointer"
- @click="showOrderCode(2)"
- >
- {{ $t("shop.WeChatPay") }}
- </div>
- <div
- style="background-color: #1378fe; cursor: pointer"
- @click="showOrderCode(4)"
- >
- {{ $t("shop.Alipay") }}
- </div>
- <div
- style="background-color: #0070ba; cursor: pointer"
- @click="showOrderCode(3)"
- >
- Paypal
- </div>
- </div>
- </div>
- <!-- 二维码弹出框 -->
- <el-dialog
- v-model="orderCodeDialogShow"
- width="30%"
- append-to-body
- destroy-on-close
- @closed="clearCode"
- :close-on-click-modal="false"
- >
- <div class="orderCodeDialog">
- <div class="codeImg">
- <my-Loading-Icon2
- v-if="!payCodeUrl && !iframeBody"
- ></my-Loading-Icon2>
- <!-- :callback="qrcode" -->
- <vue-qr v-if="payCodeUrl" :text="payCodeUrl" :size="280"></vue-qr>
- <iframe
- v-show="iframeBody"
- id="myIframe"
- width="305px"
- height="305px"
- frameborder="0"
- ></iframe>
- </div>
- <div class="tips">
- {{
- lanChange == "zh-cn"
- ? `扫描二维码进行付款`
- : `Scan the QR code for payment`
- }}
- </div>
- <div class="btnBox">
- <div @click="RefreshQR">
- {{ lanChange == "zh-cn" ? `刷新二维码` : `Refresh QR code` }}
- </div>
- </div>
- </div>
- </el-dialog>
- </el-dialog>
-
- <!-- 联系我们对话框 -->
- <talkUs
- :showTalkUsDialog="showTalkUsDialog"
- @updateShowTalkUsDialog="updateShowTalkUsDialog"
- ></talkUs>
- </div>
- </template>
-
- <script setup>
- //#region 导入
- import { getCurrentInstance, ref, onMounted } from "vue";
- import { packageInfoApi } from "@/apis/myStore";
- import { useI18n } from "vue-i18n";
- import talkUs from "@/components/talkUs.vue";
- import { useRoute, useRouter } from "vue-router";
- import { createOrderApi, createPayApi, getOrderStatusApi } from "@/apis/pay";
- import { orderDetailApi, findStatusApi } from '@/apis/myStore.js'
-
- const route = useRoute();
- const router = useRouter();
- const { locale } = useI18n();
- const lanChange = ref(locale);
-
- const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录
- //#endregion ------------------------------------
-
- //#region 各个套餐的逻辑
- // const packageList = ref([
- // {
- // id: 1,
- // type: 1,
- // typeDesc: "基础版",
- // englishName: "Trial",
- // dollar: "0.00",
- // rmb: "0.00",
- // credit: 100,
- // validityDuration: 30,
- // inviteUserCredit: 10,
- // videoPrice: 10,
- // photoPrice: 10,
- // talkPrice: 20,
- // chargeTime: 60,
- // createDate: 1686814258000,
- // updateDate: 1686814258000,
- // isDel: 0,
- // color: "#f3af00",
- // userPackageDetails: [
- // {
- // id: 1,
- // detailType: 1,
- // detailTypeDesc: "照片说话",
- // packageId: 1,
- // watermark: 1,
- // watermarkDesc: "是",
- // language: 1,
- // languageDesc: "50+",
- // sound: 1,
- // soundDesc: "400+",
- // videoTime: 60,
- // aiPortrait: 0,
- // aiPortraitDesc: "否",
- // photoSing: 0,
- // photoSingDesc: "否",
- // aiCreateTime: 0,
- // resolutionRatio: 1,
- // resolutionRatioDesc: "720p",
- // createDate: 1686882177000,
- // updateDate: 1686882177000,
- // isDel: 0,
- // },
- // {
- // id: 4,
- // detailType: 2,
- // detailTypeDesc: "口播",
- // packageId: 1,
- // watermark: 1,
- // watermarkDesc: "是",
- // language: 1,
- // languageDesc: "50+",
- // sound: 1,
- // soundDesc: "400+",
- // videoTime: 60,
- // aiCreateTime: 0,
- // resolutionRatio: 1,
- // resolutionRatioDesc: "720p",
- // humanTemplate: 1,
- // humanTemplateDesc: "免费",
- // createDate: 1686882177000,
- // updateDate: 1686882177000,
- // isDel: 0,
- // },
- // ],
- // },
- // {
- // id: 2,
- // type: 2,
- // typeDesc: "专业版",
- // englishName: "Pro",
- // dollar: "7.99",
- // rmb: "49.99",
- // credit: 200,
- // validityDuration: 30,
- // inviteUserCredit: 10,
- // videoPrice: 6,
- // photoPrice: 6,
- // talkPrice: 16,
- // chargeTime: 60,
- // createDate: 1686814258000,
- // updateDate: 1686814258000,
- // isDel: 0,
- // color: "#c971ff",
- // userPackageDetails: [
- // {
- // id: 2,
- // detailType: 1,
- // detailTypeDesc: "照片说话",
- // packageId: 2,
- // watermark: 0,
- // watermarkDesc: "否",
- // language: 1,
- // languageDesc: "50+",
- // sound: 1,
- // soundDesc: "400+",
- // videoTime: 300,
- // aiPortrait: 1,
- // aiPortraitDesc: "是",
- // photoSing: 1,
- // photoSingDesc: "是",
- // aiCreateTime: 30,
- // resolutionRatio: 2,
- // resolutionRatioDesc: "1080p",
- // createDate: 1686882177000,
- // updateDate: 1686882177000,
- // isDel: 0,
- // },
- // {
- // id: 5,
- // detailType: 2,
- // detailTypeDesc: "口播",
- // packageId: 2,
- // watermark: 0,
- // watermarkDesc: "否",
- // language: 1,
- // languageDesc: "50+",
- // sound: 1,
- // soundDesc: "400+",
- // videoTime: 300,
- // aiCreateTime: 100,
- // resolutionRatio: 2,
- // resolutionRatioDesc: "1080p",
- // humanTemplate: 2,
- // humanTemplateDesc: "VIP",
- // createDate: 1686882177000,
- // updateDate: 1686882177000,
- // isDel: 0,
- // },
- // ],
- // },
- // {
- // id: 3,
- // type: 3,
- // typeDesc: "加强版",
- // englishName: "Advanced",
- // dollar: "39.99",
- // rmb: "279.99",
- // credit: 1200,
- // validityDuration: 30,
- // inviteUserCredit: 10,
- // videoPrice: 5,
- // photoPrice: 5,
- // talkPrice: 15,
- // chargeTime: 60,
- // createDate: 1686814258000,
- // updateDate: 1686814258000,
- // isDel: 0,
- // color: "#7b61ff",
- // userPackageDetails: [
- // {
- // id: 3,
- // detailType: 1,
- // detailTypeDesc: "照片说话",
- // packageId: 3,
- // watermark: 0,
- // watermarkDesc: "否",
- // language: 1,
- // languageDesc: "50+",
- // sound: 1,
- // soundDesc: "400+",
- // videoTime: 300,
- // aiPortrait: 1,
- // aiPortraitDesc: "是",
- // photoSing: 1,
- // photoSingDesc: "是",
- // aiCreateTime: 200,
- // resolutionRatio: 2,
- // resolutionRatioDesc: "1080p",
- // createDate: 1686882177000,
- // updateDate: 1686882177000,
- // isDel: 0,
- // },
- // {
- // id: 6,
- // detailType: 2,
- // detailTypeDesc: "口播",
- // packageId: 3,
- // watermark: 0,
- // watermarkDesc: "否",
- // language: 1,
- // languageDesc: "50+",
- // sound: 1,
- // soundDesc: "400+",
- // videoTime: 300,
- // aiCreateTime: 200,
- // resolutionRatio: 2,
- // resolutionRatioDesc: "1080p",
- // humanTemplate: 2,
- // humanTemplateDesc: "VIP",
- // createDate: 1686882177000,
- // updateDate: 1686882177000,
- // isDel: 0,
- // },
- // ],
- // },
- // ]);
- const packageList = ref([]);
- async function getPackageList() {
- const res = await packageInfoApi();
- packageList.value = res.data;
- }
-
- const showPayDialog = ref(false); //套餐信息dialog显示隐藏
- const presentItme = reactive({}); //点击的套餐项
- // const presentItme = ref({}); //点击的套餐项
- function clickPayDialog(item) {
- presentItme.value = item;
- showPayDialog.value = true;
- }
-
- //#endregion ------------------------------------
-
- //#region 点击套餐内的支付
- function showOrderCode(type) {
- orderCodeDialogShow.value = true;
- myPayVendor.value = type;
- createOrderFunc();
- }
- const orderCodeDialogShow = ref(false);
- const orderCodeUrl = ref(null);
- //#endregion ------------------------------------
-
- //#region $t在script中的使用
- // const {
- // appContext: {
- // config: { globalProperties },
- // },
- // } = getCurrentInstance();
-
- // const string = "createVideo.typeScript";
- // const t = globalProperties.$t(string);
- //#endregion ------------------------------------
-
- //#region 页面滚动
- const scrollContainerRef = ref(null);
- function handleWheel(event) {
- const scrollContainer = scrollContainerRef.value; // 获取滚动容器的引用
- const scrollAmount = 150; // 每次滚动的距离
- // 检查滚动方向
- if (event.deltaY > 0) {
- // 向右滚动
- scrollContainer.scrollLeft += scrollAmount;
- } else {
- // 向左滚动
- scrollContainer.scrollLeft -= scrollAmount;
- }
- event.preventDefault(); // 防止页面上下滚动
- }
- //#endregion ------------------------------------
-
- //#region 联系我们弹窗
- const showTalkUsDialog = ref(false);
- const updateShowTalkUsDialog = (newValue) => {
- showTalkUsDialog.value = newValue;
- };
- //#endregion ------------------------------------
-
- //#region 页面初始化
- onMounted(async () => {
- getPackageList();
- // createOrderFunc();
- });
- //#endregion ------------------------------------
-
- //#region 支付
- const myPayVendor = ref(null); // 2微信 4支付宝
- const payCodeUrl = ref(null); //付款二维码地址
- const payCodeImg = ref(null); //付款二维码图片
- // 支付失败处理
- function payErrorHandle() {
- orderCodeDialogShow.value = false;
- ElMessage.error(
- lanChange.value == "zh-cn"
- ? `获取订单失败,请重试`
- : `Failed to get the order, please try again`
- );
- }
- // 获取订单
- const myOrderNumber = ref(null); //订单号
- async function createOrderFunc() {
- const data = {
- productId: 30,
- };
- try {
- const res = await createOrderApi(data);
- if (res.code == 200) {
- myOrderNumber.value = res.data;
- createPayFunc(res.data);
- } else {
- payErrorHandle();
- }
- } catch (error) {
- payErrorHandle();
- }
- }
- // 获取订单详情
- let iframeBody = ref(null);
- const iframeDom = ref(null);
- async function createPayFunc(orderNumber) {
- const data = {
- orderNumber,
- payVendor: myPayVendor.value,
- };
- try {
- const res = await createPayApi(data);
- if (res.code == 200) {
- // 支付宝获取iframe内容
- if (res.data.body) {
- iframeBody.value = res.data.body;
- iframeDom.value = document.getElementById("myIframe");
- iframeDom.value.srcdoc = iframeBody.value;
- }
- // 直接获取二维码
- if (res.data.codeUrl) {
- payCodeUrl.value = res.data.codeUrl;
- }
- await getStatusOfOrderFunc(orderNumber);
- } else {
- payErrorHandle();
- }
- } catch (error) {
- payErrorHandle();
- }
- }
- // 获取订单支付状态 payStatus 查询支付状态 0:待支付,2:支付中,3:已支付
- async function getStatusOfOrderFunc(orderNumber) {
- if (
- route.path != "/myStore" ||
- orderCodeDialogShow.value == false ||
- orderNumber != myOrderNumber.value
- ) {
- return;
- }
- try {
- let payVendor = myPayVendor.value;
- const res = await getOrderStatusApi(orderNumber, payVendor);
- if (res.code == 200) {
- if (res.data.orderStatus == 3) {
- orderCodeDialogShow.value = false;
- ElMessage.success(
- lanChange.value == "zh-cn" ? `支付成功!` : `Payment is successful!`
- );
- return;
- } else {
- setTimeout(() => {
- getStatusOfOrderFunc(orderNumber);
- }, 3000);
- }
- } else {
- setTimeout(() => {
- getStatusOfOrderFunc(orderNumber);
- }, 3000);
- }
- } catch (error) {
- console.log(error, "error");
- ElMessage.error(
- lanChange.value == "zh-cn"
- ? `获取订单失败,请重试`
- : `Failed to get the order, please try again`
- );
- }
- }
- // 生成二维码
- // function qrcode() {
- // return;
- // }
-
- // 关闭二维码弹窗
- function clearCode() {
- myPayVendor.value = null; // 2微信 4支付宝
- payCodeUrl.value = null;
- iframeBody.value = null;
- }
- // 刷新二维码
- function RefreshQR() {
- payCodeUrl.value = null;
- iframeBody.value = null;
- // createOrderFunc();
- createPayFunc(myOrderNumber.value);
- }
- //#endregion ------------------------------------
-
- //#region
-
- //#endregion ------------------------------------
-
- // 创建订单
- function createOrder(item) {
- createOrderApi({productId: item.id}).then(res => {
- createPayFunc(res.data);
- })
- }
-
- // 获取订单详情
- function getOrderDetail(item) {
- orderDetailApi(item.id).then(res => {
- })
- }
- //每隔一分钟运行一次保存方法
- // const timer = setInterval(()=>{
- // findStatus()
- // },1000)
-
- function findStatus() {
- let data = {
- orderNumber: '',
- payVendor: ''
- }
- findStatusApi(data).then(res => {
- if (res.data !== 2) { // 如果是2就不停的调,直到返回1、3、4
- clearInterval(timer);
- }
- })
- }
- </script>
-
- <style lang="scss" scoped>
- .page {
- // min-width: calc(100vw - 210px);
- height: calc(100vh - 80px);
- width: 1690px;
- padding: 0px 20px 0 20px;
- background-color: #fff;
- border-radius: 25px 0 0;
- padding: 20px;
- user-select: none;
- overflow: hidden;
- ::-webkit-scrollbar {
- display: none;
- }
- }
- // 方案列表
- .commoditylIst {
- display: flex;
- justify-content: flex-start;
- overflow-x: scroll;
- padding: 30px 20px 20px 10px;
- max-width: 100%;
- // height: 75%;
- // overflow: hidden;
- // overflow-x: scroll;
- // scrollbar-width: none; /* 隐藏滚动条(Chrome、Firefox) */
- // -ms-overflow-style: none; /* 隐藏滚动条(IE、Edge) */
- // &::-webkit-scrollbar {
- // display: none; /* 隐藏滚动条(Safari、Chrome) */
- // }
-
- .item {
- position: relative;
- width: 480px;
- // height: 680px;
- margin-left: 45px;
- background-color: #fffefd;
- flex-shrink: 0; /* 防止缩小宽度 */
- border: 1px solid #c0bfbd;
- border-radius: 20px;
- overflow: hidden;
- transition: all 0.2s;
- cursor: pointer;
- &:hover {
- .mask {
- display: block;
- }
- }
- // 遮罩层
- .mask {
- position: absolute;
- top: 0;
- left: 0;
- display: none;
- width: 100%;
- height: 100%;
- line-height: 780px;
- font-size: 120px;
- font-weight: 900;
- text-align: center;
- background-color: rgba(0, 0, 0, 0.2);
- cursor: pointer;
- }
- .line {
- height: 20px;
- background-color: pink;
- cursor: pointer;
- }
- .info {
- padding: 20px;
- cursor: pointer;
- .content {
- // height: 220px;
- padding: 20px;
- border-bottom: 1px solid #c0bfbd;
- cursor: pointer;
- .titleBox {
- display: flex;
- justify-content: space-between;
- }
- .title {
- font-size: 30px;
- font-weight: 700;
- width: 100%;
- margin-bottom: 10px;
- cursor: pointer;
- text-align: center;
- .el-icon {
- line-height: 30px;
- width: 40px;
- height: 40px;
- font-size: 40px;
- color: #000;
- text-align: center;
- vertical-align: sub;
- cursor: pointer;
- }
- }
- .money {
- margin-bottom: 10px;
- font-size: 20px;
- color: #7c7c7a;
- cursor: pointer;
- text-align: end;
- .price {
- font-size: 30px;
- font-weight: 700;
- color: #242625;
- cursor: pointer;
- }
- }
- .time {
- text-align: end;
- margin-bottom: 10px;
- font-size: 20px;
- color: #7c7c7a;
- cursor: pointer;
- margin-bottom: 20px;
- span {
- font-weight: 700;
- color: #242625;
- cursor: pointer;
- margin-right: 5px;
- }
- }
-
- .button {
- width: 100%;
- height: 40px;
- font-size: 16px;
- border-radius: 10px;
- text-align: center;
- line-height: 40px;
- color: #fff;
- font-weight: 700;
- background-color: yellow;
- cursor: pointer;
- }
- .description {
- cursor: pointer;
- margin-top: 50px;
- margin-bottom: 30px;
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- font-size: 18px;
- color: #7c7c7a;
- > div {
- cursor: pointer;
- margin-bottom: 20px;
- }
- }
- }
- .authority {
- margin-top: 10px;
- &-item {
- display: flex;
- justify-content: space-between;
- cursor: pointer;
- font-weight: 400;
- font-size: 18px;
- padding: 5px 10px;
- color: #7c7c7a;
-
- span {
- cursor: pointer;
- color: #7c7c7a;
- margin-right: 30px;
- }
- i {
- font-size: 20px;
- font-style: normal;
- margin-right: 5px;
- background-image: -webkit-linear-gradient(
- left,
- #4b61dc,
- #15d1b8 25%,
- #4b61dc 50%,
- #15d1b8 75%,
- #4b61dc
- ) !important;
- -webkit-text-fill-color: transparent !important;
- -webkit-background-clip: text !important;
- background-clip: text !important;
- -webkit-background-size: 200% 100% !important;
- background-size: 200% 100% !important;
- }
- }
- }
- }
- &:hover {
- cursor: pointer;
- transform: translateY(-20px);
- box-shadow: #00000026 2px 2px 2px 2px;
- }
- }
- }
- // 支付弹窗
- .payDialog {
- display: flex;
- position: relative;
- min-height: 500px;
- .left {
- width: 35%;
- border-right: 1px solid #7c7c7a;
- .title {
- color: #242625;
- font-weight: 700;
- font-size: 30px;
- text-align: center;
- }
- .money {
- text-align: center;
- span {
- font-size: 30px;
- font-weight: 700;
- color: #242625;
- }
- }
- .authority {
- margin-top: 10px;
- &-item {
- display: flex;
- justify-content: space-between;
- cursor: pointer;
- font-weight: 400;
- font-size: 14px;
- padding: 2px 3px;
- color: #7c7c7a;
-
- span {
- cursor: pointer;
- color: #7c7c7a;
- margin-right: 30px;
- }
- i {
- font-size: 20px;
- font-style: normal;
- margin-right: 5px;
- background-image: -webkit-linear-gradient(
- left,
- #4b61dc,
- #15d1b8 25%,
- #4b61dc 50%,
- #15d1b8 75%,
- #4b61dc
- ) !important;
- -webkit-text-fill-color: transparent !important;
- -webkit-background-clip: text !important;
- background-clip: text !important;
- -webkit-background-size: 200% 100% !important;
- background-size: 200% 100% !important;
- }
- }
- }
- }
- .right {
- width: 65%;
- position: absolute;
- top: 20%;
- right: 0%;
- padding-left: 20%;
- > div {
- width: 200px;
- height: 40px;
- // border: 1px solid #242625;
- border-radius: 10px;
- text-align: center;
- line-height: 40px;
- margin: 30px;
- color: #fff;
- }
- }
- }
- // 二维码弹窗
- .orderCodeDialog {
- width: 100%;
- .codeImg {
- display: flex;
- margin: auto;
- justify-content: space-evenly;
- align-items: center;
- width: 350px;
- height: 350px;
- border: 1px solid #ccc;
- border-radius: 15px;
- overflow: hidden;
- padding: 10px;
- img {
- width: 100%;
- height: 100%;
- }
- }
- .tips {
- padding-top: 10px;
- text-align: center;
- }
- .btnBox {
- padding: 15px 40px;
- display: flex;
- justify-content: space-evenly;
- > div {
- padding: 10px 20px;
- color: #000;
- background-color: #fff;
- border: #000 solid 1px;
- border-radius: 10px;
- transition: all 0.3s;
- cursor: pointer;
- &:hover {
- color: #fff;
- background-color: #000;
- }
- }
- }
- }
-
- // 联系我们弹窗
- .TalkUsDialog {
- display: flex;
- flex-direction: column;
- align-items: center;
- &-content {
- width: 100%;
- display: flex;
- justify-content: space-between;
- > div {
- width: 30%;
- display: flex;
- flex-direction: column;
- align-items: center;
- img {
- width: 100px;
- height: 100px;
- margin-bottom: 40px;
- }
- }
- .sendEmail {
- text-decoration: underline;
- cursor: pointer;
- }
- }
- .close {
- margin-top: 50px;
- width: 100px;
- height: 50px;
- font-size: 18px;
- line-height: 50px;
- text-align: center;
- border-radius: 15px;
- border: 2px solid #ccc;
- cursor: pointer;
- }
- }
- </style>
|