parent
04405ddb28
commit
f6a19f95b7
@ -1,2 +1,3 @@
|
||||
pos
|
||||
data
|
||||
fds
|
||||
|
||||
@ -1,474 +0,0 @@
|
||||
<template>
|
||||
<!-- Main Start -->
|
||||
<van-tabs v-model:active="active">
|
||||
<van-tab title="商品"></van-tab>
|
||||
<van-tab title="詳情"></van-tab>
|
||||
<!-- <van-tab title="評價"></van-tab> -->
|
||||
</van-tabs>
|
||||
<main class="main-wrap product-page mb-xxl" v-if="active === 0">
|
||||
<!-- Banner Section Start -->
|
||||
<div class="banner-box product-banner">
|
||||
<van-swipe>
|
||||
<van-swipe-item v-for="images in goods.goods_gallery" :index="images.img_id">
|
||||
<img class="banner_img" :src="images.img_url" />
|
||||
</van-swipe-item>
|
||||
<template #indicator="{ active, total }">
|
||||
<div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
|
||||
</template>
|
||||
</van-swipe>
|
||||
</div>
|
||||
<!-- Banner Section End -->
|
||||
|
||||
<!-- Product Section Section Start -->
|
||||
<section class="product-section">
|
||||
<div class="name">
|
||||
<div class="font-md">
|
||||
{{ goods.goods_name }}
|
||||
</div>
|
||||
<div class="share">
|
||||
<van-popover placement="left-start" @open="handleOpenPoppver" v-model:show="showPopover">
|
||||
<van-grid square clickable :border="false" column-num="4" style="width: 300px">
|
||||
<van-grid-item @click="handleClickPoppver('qrcode')">
|
||||
<div class="share-icon">
|
||||
<div>
|
||||
<img src="@/assets/icons/png/qrcode.png" />
|
||||
</div>
|
||||
<div>QRCoce</div>
|
||||
</div>
|
||||
</van-grid-item>
|
||||
<van-grid-item @click="handleClickPoppver('link')">
|
||||
<div class="share-icon">
|
||||
<div>
|
||||
<img src="@/assets/icons/png/link.png" />
|
||||
</div>
|
||||
<div>分享連結</div>
|
||||
</div>
|
||||
</van-grid-item>
|
||||
<van-grid-item @click="handleClickPoppver('line')">
|
||||
<div class="share-icon">
|
||||
<div>
|
||||
<img src="@/assets/icons/png/line.png" />
|
||||
</div>
|
||||
<div>Line</div>
|
||||
</div>
|
||||
</van-grid-item>
|
||||
<van-grid-item text="QRCoce" @click="handleClickPoppver('fb')">
|
||||
<div class="share-icon">
|
||||
<div>
|
||||
<img src="@/assets/icons/png/Facebook.png" />
|
||||
</div>
|
||||
<div>FB</div>
|
||||
</div>
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
<template #reference>
|
||||
<i class="icon-share"></i>
|
||||
</template>
|
||||
</van-popover>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rating">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-star"
|
||||
>
|
||||
<polygon
|
||||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
||||
></polygon>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-star"
|
||||
>
|
||||
<polygon
|
||||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
||||
></polygon>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-star"
|
||||
>
|
||||
<polygon
|
||||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
||||
></polygon>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-star"
|
||||
>
|
||||
<polygon
|
||||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
||||
></polygon>
|
||||
</svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-star"
|
||||
>
|
||||
<polygon
|
||||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
||||
></polygon>
|
||||
</svg>
|
||||
<span class="font-xs content-color">({{goods.click_count}}次點擊)</span>
|
||||
</div>
|
||||
<div class="price">
|
||||
<span>${{ goods.shop_price }}</span>
|
||||
<del>${{ goods.market_price }}</del>
|
||||
<span>{{ discount }}折</span>
|
||||
</div>
|
||||
<div class="brief">
|
||||
{{ goods.goods_brief }}
|
||||
</div>
|
||||
</section>
|
||||
<!-- Card Data-->
|
||||
<card-data v-model="cardData" />
|
||||
<div style="margin: 16px">
|
||||
<van-button round block type="primary" @click="addToCart(1, 1)"> 立即購買 </van-button>
|
||||
</div>
|
||||
<!-- Product Section Section End -->
|
||||
|
||||
<!-- Product Review Section Start -->
|
||||
<!-- <section class="product-review pb-0">
|
||||
<div class="top-content">
|
||||
<h3 class="title-color">用户評論(15)</h3>
|
||||
<a href="javascript:void(0)" data-bs-toggle="offcanvas" data-bs-target="#all-review" class="font-xs">See
|
||||
all</a>
|
||||
</div>
|
||||
<div class="review-wrap">
|
||||
<div class="review-box">
|
||||
<div class="media">
|
||||
<img src="@/assets/images/avatar/avatar.jpg" alt="avatar" />
|
||||
<div class="media-body">
|
||||
<h4 class="font-sm title-color">Andrea Joanne</h4>
|
||||
<div class="rating">
|
||||
<i data-feather="star"></i>
|
||||
<i data-feather="star"></i>
|
||||
<i data-feather="star"></i>
|
||||
<i data-feather="star"></i>
|
||||
<i data-feather="star"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-sm content-color">It's a really cute skirt! I didn't expect to feel so good in a
|
||||
polyester material. The print is slightly</p>
|
||||
</div>
|
||||
<div class="review-box">
|
||||
<div class="media">
|
||||
<img src="@/assets/images/avatar/avatar.jpg" alt="avatar" />
|
||||
<div class="media-body">
|
||||
<h4 class="font-sm title-color">Andrea Joanne</h4>
|
||||
<div class="rating">
|
||||
<i data-feather="star"></i>
|
||||
<i data-feather="star"></i>
|
||||
<i data-feather="star"></i>
|
||||
<i data-feather="star"></i>
|
||||
<i data-feather="star"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-sm content-color">It's a really cute skirt! I didn't expect to feel so good in a
|
||||
polyester material. The print is slightly</p>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
<!-- Product Review Section End -->
|
||||
|
||||
<section class="check-delivery-section">
|
||||
<div class="service-section">
|
||||
<ul>
|
||||
<li class="font-sm content-color">
|
||||
<img src="@/assets/icons/svg/delivery.svg" class="img-fluid" alt="" />
|
||||
NFC感應卡片將在三個工作天寄至您的收件地址
|
||||
</li>
|
||||
<!-- <li class="font-sm content-color"><img src="@/assets/icons/svg/payment.svg" class="img-fluid"
|
||||
alt="" />
|
||||
Cash On delivery Available
|
||||
</li>
|
||||
<li class="font-sm content-color"><img src="@/assets/icons/svg/refund.svg" class="img-fluid"
|
||||
alt="" />
|
||||
Easy 21 days returns and exchanges
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Main End -->
|
||||
<!-- Main Start -->
|
||||
<main class="main-wrap detail-page mb-xxl" v-if="active == 1">
|
||||
<section class="detail-section" v-html="goods.goods_desc"></section>
|
||||
</main>
|
||||
<!-- Main End -->
|
||||
<!-- 分享二維碼 Start -->
|
||||
<van-dialog
|
||||
v-model:show="showShareQrcode"
|
||||
title="分享二維碼"
|
||||
:show-cancel-button="true"
|
||||
cancel-button-text="關閉"
|
||||
:show-confirm-button="false"
|
||||
>
|
||||
<div class="qrcode-block">
|
||||
<qrcode-vue :value="`https://shop.slash1000.com/m/card?refer=${refer_code}`" size="200" level="M" />
|
||||
</div>
|
||||
</van-dialog>
|
||||
<!-- Main End -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Cookies from "js-cookie";
|
||||
import QrcodeVue from "qrcode.vue";
|
||||
import { toClipboard } from '@soerenmartius/vue3-clipboard'
|
||||
|
||||
import { ref, onMounted, watch, computed } from "vue";
|
||||
import { getGoods } from "@/services/goods";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
import { useCartStore } from "@/store/Cart.js";
|
||||
import { useUserStore } from "@/store/User.js";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
import { showToast } from "vant";
|
||||
import "vant/es/toast/style";
|
||||
|
||||
import { addCart } from "@/services/cart";
|
||||
|
||||
import CardData from "./compoments/CardData.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const cartStore = useCartStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const active = ref(0);
|
||||
const goods = ref({});
|
||||
|
||||
const cardData = ref({
|
||||
cname: "",
|
||||
ename: "",
|
||||
image: "",
|
||||
user_id: Cookies.get("uid") || "",
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
let res = await getGoods(1);
|
||||
|
||||
if (res.code === 200) {
|
||||
goods.value = res.data;
|
||||
}
|
||||
});
|
||||
|
||||
const discount = computed(() => {
|
||||
return Math.ceil((goods.value.shop_price / goods.value.market_price) * 10);
|
||||
});
|
||||
|
||||
const addToCart = async (id, type) => {
|
||||
//上傳商品至購物車
|
||||
let goods = {
|
||||
quick: 1,
|
||||
spec: "",
|
||||
goods_id: id,
|
||||
number: 1,
|
||||
parent: 0,
|
||||
cardInfo: cardData.value,
|
||||
};
|
||||
|
||||
let res = await cartStore.addCart(goods);
|
||||
|
||||
if (!res) {
|
||||
return showToast("添加失敗！");
|
||||
}
|
||||
|
||||
if (type === 0) {
|
||||
showToast("添加成功！");
|
||||
} else {
|
||||
//判斷是否有登入
|
||||
if (Cookies.get("uid")) {
|
||||
return router.push("/checkout");
|
||||
}
|
||||
return router.push({
|
||||
path: "/login",
|
||||
query: {
|
||||
redirect: "/checkout",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return;
|
||||
};
|
||||
|
||||
const goCheckout = async () => {
|
||||
//上傳商品至購物車
|
||||
let goods = {
|
||||
quick: 1,
|
||||
spec: "",
|
||||
goods_id: 1,
|
||||
number: 1,
|
||||
parent: 0,
|
||||
cardInfo: form.value,
|
||||
};
|
||||
let res = await addCart(goods);
|
||||
if (res.code === 200) {
|
||||
//判斷是否有登入
|
||||
if (Cookies.get("uid")) {
|
||||
return router.push("/checkout");
|
||||
}
|
||||
return router.push("/login");
|
||||
}
|
||||
alert("操作錯誤，請重新操作");
|
||||
return;
|
||||
};
|
||||
|
||||
//分享連結
|
||||
const showPopover = ref(false);
|
||||
const showShareQrcode = ref(false);
|
||||
|
||||
const refer_code = computed(() => {
|
||||
if (!Cookies.get("uid")) {
|
||||
return "";
|
||||
}
|
||||
return userStore.info.refer_code;
|
||||
});
|
||||
|
||||
const handleOpenPoppver = () => {
|
||||
//判斷是否有登入
|
||||
if (!Cookies.get("uid")) {
|
||||
return showToast("注意！正式會員分享才能獲得獎勵喔，如果您已是正式會員，請先登入！");
|
||||
}
|
||||
};
|
||||
|
||||
const handleClickPoppver = (type) => {
|
||||
const share_url = "https://shop.slash1000.com/m/card?refer=" + refer_code.value;
|
||||
switch (type) {
|
||||
case "qrcode":
|
||||
showShareQrcode.value = true;
|
||||
break;
|
||||
case "link":
|
||||
toClipboard(share_url);
|
||||
showToast("已放入剪貼簿");
|
||||
break;
|
||||
case "line":
|
||||
window.location.href = "https://social-plugins.line.me/lineit/share?url=" + encodeURI(share_url);
|
||||
break;
|
||||
case "fb":
|
||||
window.open("https://www.facebook.com/share.php?u=" + encodeURI(share_url), "_blank");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
showPopover.value = false;
|
||||
};
|
||||
|
||||
const onSelect = (action) => Toast(action.text);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.van-swipe-item {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
line-height: 200px;
|
||||
text-align: center;
|
||||
background-color: #39a9ed;
|
||||
}
|
||||
|
||||
.custom-indicator {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
padding: 2px 5px;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.banner_img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-section {
|
||||
.name {
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
line-height: 20px;
|
||||
height: 80px;
|
||||
// margin-top: -3px;
|
||||
display: flex;
|
||||
background-color: #f2f2f2;
|
||||
padding: 15px;
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
|
||||
.font-md {
|
||||
flex: 1;
|
||||
margin-right: 15px;
|
||||
border-right: 1px #666 solid;
|
||||
}
|
||||
|
||||
.share {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.brief {
|
||||
margin: 10px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.share-icon {
|
||||
text-align: center;
|
||||
div:nth-child(1) {
|
||||
img {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
// div:child-nth(2){
|
||||
|
||||
// }
|
||||
}
|
||||
|
||||
.qrcode-block {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,274 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" :class="{ active: !showCardType }" href="javascript:void(0)"
|
||||
@click="showCardType = 0">正面</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" :class="{ active: showCardType }" href="javascript:void(0)"
|
||||
@click="showCardType = 1">反面</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="card-preview">
|
||||
<div class="front" v-show="showCardType === 0">
|
||||
<!-- <img class="front-bg" src="@/assets/images/card/front.png"> -->
|
||||
<div class="front-cname">{{ form.cname }}</div>
|
||||
<div class="front-ename">{{ form.ename }}</div>
|
||||
<img class="front-logo" :src="form.image || defaultLogo">
|
||||
</div>
|
||||
<div class="back" v-show="showCardType === 1">
|
||||
<img src="@/assets/images/card/qrcode.png">
|
||||
</div>
|
||||
</div>
|
||||
<van-cell-group inset>
|
||||
<van-field v-model="form.cname" type="text" placeholder="任何您想寫的文字" label="中文姓名" />
|
||||
<van-field v-model="form.ename" type="text" placeholder="任何您想寫的文字" label="英文姓名" />
|
||||
</van-cell-group>
|
||||
<div style="margin: 16px 32px;">
|
||||
圖片<br />
|
||||
<van-uploader :after-read="afterRead" @delete="handleDelete" accept="image/*" name="logo" class="img-uploader"
|
||||
:max-count="1" v-model="fileList" />
|
||||
<!-- <div class="upload-main">
|
||||
<img class="upload-img" :src="form.avatar" alt="">
|
||||
<p>上傳圖片</p>
|
||||
</div> -->
|
||||
<!-- </van-uploader> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- crop : Start -->
|
||||
<van-overlay :show="crop.show" @click="crop.show = false" />
|
||||
<div class="cropper-section" v-if="crop.show">
|
||||
<div class="crop-area">
|
||||
<cropper class="cropper" ref="myCrop" :src="crop.img" :stencil-props="{
|
||||
aspectRatio: 10 / 10,
|
||||
}" :auto-zoom="true" />
|
||||
</div>
|
||||
<div class="crop-btn">
|
||||
<van-button type="primary" size="small" plain @click="onClose">取消</van-button>
|
||||
<van-button type="success" size="small" plain @click="onCrop">剪裁</van-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- crop : End -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
import { Cropper } from 'vue-advanced-cropper';
|
||||
import 'vue-advanced-cropper/dist/style.css';
|
||||
|
||||
import { uploadFile } from '@/services/card'
|
||||
|
||||
import defaultLogo from '@/assets/images/logo/logo.png'
|
||||
|
||||
const showCardType = ref(0)
|
||||
|
||||
const fileList = ref([])
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: ()=>({})
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const form = computed({
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set(v) {
|
||||
console.log('set', v)
|
||||
emit('update:modelValue', v)
|
||||
}
|
||||
})
|
||||
|
||||
const afterRead = async (file) => {
|
||||
|
||||
crop.value.show = true
|
||||
crop.value.img = file.content
|
||||
return
|
||||
|
||||
let imgFile = new FormData()
|
||||
imgFile.append("fileType", 'IMAGE');
|
||||
imgFile.append("file", file.file);
|
||||
|
||||
file.status = 'uploading'
|
||||
file.message = '上傳中...'
|
||||
|
||||
try {
|
||||
let res = await uploadFile(imgFile)
|
||||
|
||||
if (res && res.code === 200) {
|
||||
form.value.image = res.data
|
||||
file.status = 'done';
|
||||
file.message = '上傳完成';
|
||||
} else {
|
||||
file.status = 'failed';
|
||||
file.message = '上傳失敗';
|
||||
}
|
||||
} catch (e) {
|
||||
file.status = 'failed'
|
||||
file.message = '上傳失敗'
|
||||
}
|
||||
}
|
||||
|
||||
// crop
|
||||
|
||||
const myCrop = ref(null);
|
||||
|
||||
const crop = ref({
|
||||
show: false,
|
||||
img: null,
|
||||
outputType: "jpeg",
|
||||
autoCrop: true,
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 200,
|
||||
});
|
||||
|
||||
const onCrop = () => {
|
||||
const { canvas } = myCrop.value.getResult();
|
||||
|
||||
if (canvas) {
|
||||
const imgFile = new FormData();
|
||||
canvas.toBlob(async (blob) => {
|
||||
let ufile = new File([blob], "image.jpg");
|
||||
imgFile.append("fileType", "IMAGE");
|
||||
imgFile.append("file", ufile);
|
||||
|
||||
crop.value.show = false;
|
||||
|
||||
// Toast.loading({
|
||||
// duration: 0,
|
||||
// message: "圖片上傳中...",
|
||||
// forbidClick: true,
|
||||
// });
|
||||
fileList.value[0] = {
|
||||
status: 'uploading',
|
||||
message: '上傳中...'
|
||||
}
|
||||
|
||||
try {
|
||||
let res = await uploadFile(imgFile)
|
||||
|
||||
if (res && res.code === 200) {
|
||||
form.value.image = res.data
|
||||
fileList.value[0] = {
|
||||
url: res.data,
|
||||
status: 'done',
|
||||
message: '上傳成功'
|
||||
}
|
||||
} else {
|
||||
fileList.value[0] = {
|
||||
status: 'failed',
|
||||
message: '上傳失敗'
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
fileList.value[0] = {
|
||||
status: 'failed',
|
||||
message: '上傳失敗'
|
||||
}
|
||||
}
|
||||
}, "image/jpeg");
|
||||
}
|
||||
return;
|
||||
};
|
||||
|
||||
const onClose = () => {
|
||||
fileList.value = []
|
||||
crop.value.show = false;
|
||||
};
|
||||
|
||||
const handleDelete = (file) => {
|
||||
console.log('delete')
|
||||
console.log('file', file)
|
||||
form.value.image = ''
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.card-preview {
|
||||
// height: 50%;
|
||||
width: 345px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.front {
|
||||
width: 345px;
|
||||
height: 220px;
|
||||
position: relative;
|
||||
background-image: url(@/assets/images/card/front.png);
|
||||
background-size: 345px 220px;
|
||||
|
||||
.front-logo {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
top: 50px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.front-cname {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 180px;
|
||||
font-size: 20px;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
.front-ename {
|
||||
position: absolute;
|
||||
top: 110px;
|
||||
left: 180px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 345px;
|
||||
height: 220px;
|
||||
position: relative;
|
||||
background-image: url(@/assets/images/card/back.png);
|
||||
background-size: 345px 220px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cropper-section {
|
||||
margin: 0 auto;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
top: 50px;
|
||||
// left: 0;
|
||||
height: 350px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
background: #ddd;
|
||||
z-index: 8888;
|
||||
|
||||
.crop-area {
|
||||
margin: 5 auto;
|
||||
width: 100%;
|
||||
height: 330px;
|
||||
}
|
||||
|
||||
.crop-btn {
|
||||
background-color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.cropper {
|
||||
height: 300px;
|
||||
// width: 300px;
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,6 +1,8 @@
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
取號
|
||||
<div>
|
||||
取號
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
</script>
|
||||
Loading…
Reference in new issue