forked from natuka/web.puabadge.com
代码提交
This commit is contained in:
Linzm committed
1 parent
c30768d605
commit
b52dcc0842
14 files changed
+3997
-38
No files matched your search
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="my-order">
|
||||
<div class="header" @click="goBack">
|
||||
<span class="back-icon"><van-icon name="arrow-left" size="16px" color="#333" /> {{ toValueWithout(config.myOrder.messages.title) }}</span>
|
||||
</div>
|
||||
<div class="order-list" v-if="orders.length > 0">
|
||||
<div class="order-item" @click="OrderDetail(item.id)" v-for="item in orders" :key="item.id">
|
||||
<img class="order-img" :src="item.path" alt="order1" />
|
||||
<span class="order-status status-finished">{{ getStatus(item.status) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="record-image-item-null">
|
||||
<img :src="nullDataImage" :alt="toValueWithout(config.myOrder.messages.noData)">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import * as badgeApi from '@/api/badge'
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { toValueWithout } from '@/lang/utils'
|
||||
import { cartoonConfig as config } from '@/config/cartoon'
|
||||
import nullDataImage from '@/assets/badge/null-data.png'
|
||||
|
||||
const router = useRouter()
|
||||
const page = ref(config.myOrder.pagination.initialPage)
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
const orders = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
getOrder()
|
||||
})
|
||||
|
||||
function getOrder() {
|
||||
if(loading.value) return
|
||||
loading.value = true
|
||||
badgeApi.getMyOrder({
|
||||
page: page.value,
|
||||
size: config.myOrder.pagination.pageSize,
|
||||
status: config.myOrder.pagination.defaultStatus,
|
||||
}).then(res => {
|
||||
if(page.value === config.myOrder.pagination.initialPage) {
|
||||
orders.value = res.list
|
||||
} else {
|
||||
orders.value.push(...res.list)
|
||||
}
|
||||
if(res.total <= orders.value.length) {
|
||||
finished.value = true
|
||||
} else {
|
||||
page.value++
|
||||
}
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
router.push(config.routes.home)
|
||||
}
|
||||
|
||||
function OrderDetail(id: number) {
|
||||
router.push({
|
||||
path: config.routes.orderDetail,
|
||||
query: {
|
||||
id: id,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function getStatus(status: number) {
|
||||
const statusText = config.myOrder.statusText[status]
|
||||
if (statusText) {
|
||||
return toValueWithout(statusText)
|
||||
}
|
||||
return ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
padding: 16px 16px 0 16px;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
margin-right: 8px;
|
||||
color: #222;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.order-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: v-bind('config.myOrder.styles.gap + "px"');
|
||||
padding: v-bind('config.myOrder.styles.padding.vertical + "px"') v-bind('config.myOrder.styles.padding.horizontal + "px"');
|
||||
}
|
||||
|
||||
.order-item {
|
||||
position: relative;
|
||||
width: v-bind('config.myOrder.styles.itemWidth');
|
||||
height: v-bind('config.myOrder.styles.itemHeight');
|
||||
box-shadow: v-bind('config.myOrder.styles.shadow');
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.order-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: v-bind('config.myOrder.styles.borderRadius + "px"');
|
||||
}
|
||||
|
||||
.order-status {
|
||||
position: absolute;
|
||||
bottom: v-bind('config.myOrder.styles.status.bottom + "px"');
|
||||
right: v-bind('config.myOrder.styles.status.right + "px"');
|
||||
padding: v-bind('config.myOrder.styles.status.padding.vertical + "px"') v-bind('config.myOrder.styles.status.padding.horizontal + "px"');
|
||||
border-radius: v-bind('config.myOrder.styles.status.borderRadius + "px"');
|
||||
font-size: v-bind('config.myOrder.styles.status.fontSize + "px"');
|
||||
color: v-bind('config.myOrder.statusStyles.default.color');
|
||||
background: v-bind('config.myOrder.statusStyles.default.background');
|
||||
opacity: v-bind('config.myOrder.statusStyles.default.opacity');
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.status-processing {
|
||||
background: v-bind('config.myOrder.statusStyles.processing.background');
|
||||
}
|
||||
|
||||
.status-finished {
|
||||
background: v-bind('config.myOrder.statusStyles.finished.background');
|
||||
}
|
||||
|
||||
.record-image-item-null {
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.record-image-item-null img {
|
||||
width: 80vw;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<div class="my-order">
|
||||
<div class="header" @click="goBack">
|
||||
<span class="back-icon"><van-icon name="arrow-left" size="16px" color="#333" /> {{ toValueWithout(config.orderDetail.messages.title) }}</span>
|
||||
</div>
|
||||
<div class="order-status">
|
||||
<div class="avatar-wrapper">
|
||||
<div class="avatar-front-box" v-if="order.type_id != config.orderDetail.productTypes.reliefPendant">
|
||||
<img class="avatar-font-img" :src="imageUrl" :alt="order.kind_name" />
|
||||
</div>
|
||||
<div class="avatar-front-box-double" v-if="order.type_id == config.orderDetail.productTypes.reliefPendant">
|
||||
<img class="avatar-font-img" :src="imageUrl" />
|
||||
<img class="avatar-font-img" :src="backImageUrl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-info">
|
||||
<div class="status-title">{{ getStatus(order.status) }}</div>
|
||||
<div class="status-desc">
|
||||
{{ toValueWithout(config.orderDetail.messages.statusDesc) }}
|
||||
</div>
|
||||
</div>
|
||||
<div :style="`padding: 0 ${config.orderDetail.styles.padding.horizontal}px;`">
|
||||
<van-divider />
|
||||
</div>
|
||||
<div class="product-info" v-if="order.use_type == config.orderDetail.orderTypes.shipping">
|
||||
<div class="product-title">{{ toValueWithout(config.orderDetail.messages.shippingInfo) }}</div>
|
||||
<div class="product-details">
|
||||
<div class="product-row">
|
||||
<span class="product-label">{{ toValueWithout(config.orderDetail.messages.contactInfo) }}</span>
|
||||
<span class="product-value">{{order.contact_name}} {{order.contact_mobile}}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">{{ toValueWithout(config.orderDetail.messages.shippingAddress) }}</span>
|
||||
<span class="product-value">{{order.province_name}} {{order.city_name}} {{order.county_name}} {{order.address}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="`padding: 0 ${config.orderDetail.styles.padding.horizontal}px;`" v-if="order.use_type == config.orderDetail.orderTypes.shipping">
|
||||
<van-divider />
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="product-title">{{ toValueWithout(config.orderDetail.messages.productInfo) }}</div>
|
||||
<div class="product-details">
|
||||
<div class="product-row">
|
||||
<span class="product-label">{{ toValueWithout(config.orderDetail.messages.productName) }}</span>
|
||||
<span class="product-value" v-if="order.type_id && config.preview.productNames[order.type_id]">
|
||||
{{ toValueWithout(config.preview.productNames[order.type_id][order.prod_id] || '') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">{{ toValueWithout(config.orderDetail.messages.size) }}</span>
|
||||
<span class="product-value">{{order.model_size}}</span>
|
||||
</div>
|
||||
<div class="product-row" v-if="shape_name && order.type_id != config.orderDetail.productTypes.reliefPendant">
|
||||
<span class="product-label">{{ toValueWithout(config.orderDetail.messages.shape) }}</span>
|
||||
<span class="product-value">{{ toValueWithout(shape_name) }}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">{{ toValueWithout(config.orderDetail.messages.quantity) }}</span>
|
||||
<span class="product-value">{{order.count}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="`padding: 0 ${config.orderDetail.styles.padding.horizontal}px;`">
|
||||
<van-divider />
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<div class="product-title">{{ toValueWithout(config.orderDetail.messages.orderInfo) }}</div>
|
||||
<div class="product-details">
|
||||
<div class="product-row">
|
||||
<span class="product-label">{{ toValueWithout(config.orderDetail.messages.orderId) }}</span>
|
||||
<span class="product-value">{{order.sw_oid}}</span>
|
||||
</div>
|
||||
<div class="product-row">
|
||||
<span class="product-label">{{ toValueWithout(config.orderDetail.messages.orderTime) }}</span>
|
||||
<span class="product-value">{{order.pay_at}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="`height: ${config.orderDetail.styles.bottomSpacing}px;`"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import * as badgeApi from '@/api/badge';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { toValueWithout } from '@/lang/utils';
|
||||
import { cartoonConfig as config } from '@/config/cartoon';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const order = ref({})
|
||||
const id = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
id.value = route.query.id as any
|
||||
getOrderDetail()
|
||||
})
|
||||
|
||||
const shapeImage = ref('')
|
||||
const imageUrl = ref('')
|
||||
const backImageUrl = ref('')
|
||||
const getStyle = ref('')
|
||||
const shape_name = ref('')
|
||||
const imageList = ref([])
|
||||
|
||||
function getOrderDetail() {
|
||||
badgeApi.getOrderDetail({
|
||||
id: id.value,
|
||||
}).then(res => {
|
||||
order.value = res;
|
||||
imageUrl.value = res.path;
|
||||
backImageUrl.value = res.back_path;
|
||||
shapeImage.value = res.shape_details?.frame_path || '';
|
||||
shape_name.value = res.shape_details?.name || '';
|
||||
imageList.value = [
|
||||
res.path,
|
||||
res.back_path,
|
||||
];
|
||||
})
|
||||
}
|
||||
|
||||
const ImageShow = (item: any) => {
|
||||
const scale = config.orderDetail.imageScale
|
||||
const img = new Image()
|
||||
img.src = item.frame_path
|
||||
img.onload = () => {
|
||||
console.log('img', img)
|
||||
const ratioWidth = config.orderDetail.imageSize.width / img.width;
|
||||
const ratioHeight = config.orderDetail.imageSize.height / img.height;
|
||||
const x = item.axisx * ratioWidth * scale;
|
||||
const y = item.axisy * ratioHeight * scale;
|
||||
const path_width = item.width * ratioWidth * scale;
|
||||
const path_height = item.height * ratioHeight * scale;
|
||||
getStyle.value = `left: ${x}px;top: ${y}px;width: ${path_width}px;height: ${path_height}px;transform: rotate3D(1, 1, 0, 0deg)`
|
||||
}
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
router.back()
|
||||
}
|
||||
|
||||
function getStatus(status: number) {
|
||||
const statusText = config.myOrder.statusText[status]
|
||||
if (statusText) {
|
||||
return toValueWithout(statusText)
|
||||
}
|
||||
return ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
padding: 16px 16px 0 16px;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
margin-right: 8px;
|
||||
color: #222;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
margin: 0 auto;
|
||||
width: 100vw;
|
||||
height: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
width: v-bind('config.orderDetail.imageSize.width + "px"');
|
||||
height: v-bind('config.orderDetail.imageSize.height + "px"');
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-back-img {
|
||||
position: absolute;
|
||||
width: v-bind('config.orderDetail.imageSize.width + "px"');
|
||||
height: v-bind('config.orderDetail.imageSize.height + "px"');
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.avatar-front-box {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.avatar-font-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: v-bind('config.orderDetail.imageSize.height + "px"');
|
||||
border-radius: v-bind('config.orderDetail.imageSize.borderRadius + "px"');
|
||||
}
|
||||
|
||||
.avatar-front-box-double {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: v-bind('config.orderDetail.styles.avatar.gap + "px"');
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.status-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: v-bind('config.orderDetail.styles.statusInfo.padding.vertical + "px"') v-bind('config.orderDetail.styles.statusInfo.padding.horizontal + "px"');
|
||||
}
|
||||
|
||||
.status-title {
|
||||
font-size: v-bind('config.orderDetail.styles.statusInfo.title.fontSize + "px"');
|
||||
font-weight: v-bind('config.orderDetail.styles.statusInfo.title.fontWeight');
|
||||
color: v-bind('config.orderDetail.styles.statusInfo.title.color');
|
||||
margin-bottom: v-bind('config.orderDetail.styles.statusInfo.title.marginBottom + "px"');
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-size: v-bind('config.orderDetail.styles.statusInfo.desc.fontSize + "px"');
|
||||
color: v-bind('config.orderDetail.styles.statusInfo.desc.color');
|
||||
}
|
||||
|
||||
.product-info {
|
||||
width: 100%;
|
||||
padding: v-bind('config.orderDetail.styles.productInfo.padding.vertical + "px"') v-bind('config.orderDetail.styles.productInfo.padding.horizontal + "px"');
|
||||
}
|
||||
|
||||
.product-title {
|
||||
font-size: v-bind('config.orderDetail.styles.productInfo.title.fontSize + "px"');
|
||||
font-weight: v-bind('config.orderDetail.styles.productInfo.title.fontWeight');
|
||||
color: v-bind('config.orderDetail.styles.productInfo.title.color');
|
||||
margin-bottom: v-bind('config.orderDetail.styles.productInfo.title.marginBottom + "px"');
|
||||
}
|
||||
|
||||
.product-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: v-bind('config.orderDetail.styles.productInfo.details.gap + "px"');
|
||||
}
|
||||
|
||||
.product-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.product-label {
|
||||
color: v-bind('config.orderDetail.styles.productInfo.label.color');
|
||||
font-size: v-bind('config.orderDetail.styles.productInfo.label.fontSize + "px"');
|
||||
}
|
||||
|
||||
.product-value {
|
||||
color: v-bind('config.orderDetail.styles.productInfo.value.color');
|
||||
font-size: v-bind('config.orderDetail.styles.productInfo.value.fontSize + "px"');
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="header" @click="goBack" style="text-align: center;">
|
||||
<span class="back-icon"><van-icon name="arrow-left" size="16px" color="#333" /> {{ toValueWithout(config.photoAlbum.messages.title) }}</span>
|
||||
</div>
|
||||
<div class="record-container">
|
||||
<div class="record-note">{{ toValueWithout(config.photoAlbum.messages.note) }}</div>
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<van-list
|
||||
v-model:loading="loading"
|
||||
:finished="finished"
|
||||
:finished-text="toValueWithout(config.photoAlbum.messages.noMore)"
|
||||
@load="onLoad"
|
||||
>
|
||||
<div class="record-images" v-if="images.length > 0">
|
||||
<div class="record-image-item" v-for="item in images" :key="item.id">
|
||||
<block v-if="item.status == config.photoAlbum.status.success" @click="goPreview(item)">
|
||||
<img :src="item.path" :alt="item.name" class="record-image">
|
||||
<div class="record-image-item-shadow"></div>
|
||||
</block>
|
||||
<div v-else-if="item.status == config.photoAlbum.status.designing || item.reason" class="record-image-item-loading">
|
||||
<div style="font-size: 12px;color: #999;text-align: center;">ID: {{ item.sw_pid }}</div>
|
||||
<div style="width: 70%;font-size: 12px;">{{ item.reason || toValueWithout(config.photoAlbum.messages.designing) }}</div>
|
||||
</div>
|
||||
<div v-else-if="item.status == config.photoAlbum.status.failed || item.reason" class="record-image-item-loading">
|
||||
<div style="font-size: 12px;color: #999;text-align: center;">ID: {{ item.sw_pid }}</div>
|
||||
<div style="width: 70%;font-size: 12px;">{{ item.reason || toValueWithout(config.photoAlbum.messages.designFailed) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="loading && page.value === config.photoAlbum.pagination.initialPage" class="record-image-item-loading">
|
||||
{{ toValueWithout(config.photoAlbum.messages.loading) }}
|
||||
</div>
|
||||
<div v-else class="record-image-item-null">
|
||||
<img :src="nullDataImage" :alt="toValueWithout(config.photoAlbum.messages.noData)">
|
||||
</div>
|
||||
</van-list>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
import * as badgeApi from '@/api/badge';
|
||||
import { onMounted, ref, onUnmounted } from 'vue';
|
||||
import { toValueWithout } from '@/lang/utils';
|
||||
import { cartoonConfig as config } from '@/config/cartoon';
|
||||
import nullDataImage from '@/assets/badge/null-data.png';
|
||||
|
||||
const router = useRouter();
|
||||
const images = ref([]);
|
||||
const page = ref(config.photoAlbum.pagination.initialPage);
|
||||
const loading = ref(false);
|
||||
const finished = ref(false);
|
||||
const error = ref(null);
|
||||
const refreshing = ref(false);
|
||||
|
||||
// 获取设计记录列表
|
||||
async function getList() {
|
||||
// 如果正在加载或者已经加载完所有数据，则返回
|
||||
console.log(loading.value, finished.value);
|
||||
if (loading.value || finished.value) return;
|
||||
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
const res = await badgeApi.getLogOage({
|
||||
page: page.value,
|
||||
size: config.photoAlbum.pagination.pageSize,
|
||||
});
|
||||
|
||||
if (page.value === config.photoAlbum.pagination.initialPage) {
|
||||
images.value = res.list || [];
|
||||
} else {
|
||||
images.value.push(...(res.list || []));
|
||||
}
|
||||
|
||||
// 判断是否还有更多数据
|
||||
if (!res.list || res.list.length < config.photoAlbum.pagination.pageSize) {
|
||||
finished.value = true;
|
||||
} else {
|
||||
page.value++;
|
||||
}
|
||||
} catch (err: any) {
|
||||
error.value = err.message || toValueWithout(config.photoAlbum.messages.getDataFailed);
|
||||
console.error('获取设计记录失败', err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 查看设计预览
|
||||
function goPreview(item) {
|
||||
router.push({
|
||||
path: config.routes.preview,
|
||||
query: {
|
||||
pid: item.sw_pid,
|
||||
group: item.group_count,
|
||||
key: item.num,
|
||||
prod_id: item.prod_id
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
function onLoad() {
|
||||
loading.value = false;
|
||||
getList();
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
async function onRefresh() {
|
||||
refreshing.value = true;
|
||||
page.value = config.photoAlbum.pagination.initialPage;
|
||||
finished.value = false;
|
||||
await getList();
|
||||
refreshing.value = false;
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
function goBack() {
|
||||
router.push('/cartoon');
|
||||
}
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
// 组件卸载时清理
|
||||
onUnmounted(() => {
|
||||
loading.value = false;
|
||||
finished.value = false;
|
||||
page.value = config.photoAlbum.pagination.initialPage;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
padding: 16px 16px 0 16px;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
margin-right: 8px;
|
||||
color: #222;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.record-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.record-note {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.record-images {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(v-bind('config.photoAlbum.styles.gridColumns'), 1fr);
|
||||
gap: v-bind('config.photoAlbum.styles.gap + "px"');
|
||||
}
|
||||
|
||||
.record-image-item {
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
border-radius: v-bind('config.photoAlbum.styles.borderRadius + "px"');
|
||||
}
|
||||
|
||||
.record-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.record-image-item-shadow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.5), inset -2px -2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.record-image-item-loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background: #f5f5f5;
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.record-image-item-null {
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.record-image-item-null img {
|
||||
width: 80vw;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
Reference in new issue
Block a user