178 lines
4.1 KiB
Vue
178 lines
4.1 KiB
Vue
<template>
|
|
<view
|
|
class="skeleton-wrap"
|
|
:class="['theme-' + sys.mode, 'main-' + sys.theme, 'font-' + sys.fontSize]"
|
|
>
|
|
<view class="skeleton-banner"></view>
|
|
<view class="container-box">
|
|
<view class="container-box-strip title ss-m-b-58"></view>
|
|
<view class="container-box-strip ss-m-b-20"></view>
|
|
<view class="container-box-strip ss-m-b-20"></view>
|
|
<view class="container-box-strip w-364"></view>
|
|
</view>
|
|
<view class="container-box">
|
|
<view class="ss-flex ss-row-between ss-m-b-34">
|
|
<view class="container-box-strip w-380"></view>
|
|
<view class="circle"></view>
|
|
</view>
|
|
<view class="ss-flex ss-row-between ss-m-b-34">
|
|
<view class="container-box-strip w-556"></view>
|
|
<view class="circle"></view>
|
|
</view>
|
|
<view class="ss-flex ss-row-between">
|
|
<view class="container-box-strip w-556"></view>
|
|
<view class="circle"></view>
|
|
</view>
|
|
</view>
|
|
<view class="container-box">
|
|
<view class="container-box-strip w-198 ss-m-b-42"></view>
|
|
<view class="ss-flex">
|
|
<view class="circle ss-m-r-12"></view>
|
|
<view class="container-box-strip w-252"></view>
|
|
</view>
|
|
</view>
|
|
<su-fixed bottom placeholder bg="bg-white">
|
|
<view class="ui-tabbar-box">
|
|
<view class="foot ss-flex ss-col-center">
|
|
<view class="ss-m-r-54 ss-m-l-32">
|
|
<view class="rec ss-m-b-8"></view>
|
|
<view class="oval"></view>
|
|
</view>
|
|
<view class="ss-m-r-54">
|
|
<view class="rec ss-m-b-8"></view>
|
|
<view class="oval"></view>
|
|
</view>
|
|
<view class="ss-m-r-50">
|
|
<view class="rec ss-m-b-8"></view>
|
|
<view class="oval"></view>
|
|
</view>
|
|
<button class="ss-reset-button add-btn ui-Shadow-Main"></button>
|
|
<button class="ss-reset-button buy-btn ui-Shadow-Main"></button>
|
|
</view>
|
|
</view>
|
|
</su-fixed>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import sheep from '@/sheep';
|
|
|
|
const sys = computed(() => sheep.$store('sys'));
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@keyframes loading {
|
|
0% {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.skeleton-wrap {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: relative;
|
|
|
|
.skeleton-banner {
|
|
width: 100%;
|
|
height: calc(100vh - 882rpx);
|
|
background: #f4f4f4;
|
|
}
|
|
|
|
.container-box {
|
|
padding: 24rpx 18rpx;
|
|
margin: 14rpx 20rpx;
|
|
background: var(--ui-BG);
|
|
animation: loading 1.4s ease infinite;
|
|
|
|
.container-box-strip {
|
|
height: 40rpx;
|
|
background: #f3f3f1;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.title {
|
|
width: 470rpx;
|
|
height: 50rpx;
|
|
border-radius: 25rpx;
|
|
}
|
|
|
|
.w-364 {
|
|
width: 364rpx;
|
|
}
|
|
|
|
.w-380 {
|
|
width: 380rpx;
|
|
}
|
|
|
|
.w-556 {
|
|
width: 556rpx;
|
|
}
|
|
|
|
.w-198 {
|
|
width: 198rpx;
|
|
}
|
|
|
|
.w-252 {
|
|
width: 252rpx;
|
|
}
|
|
|
|
.circle {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: #f3f3f1;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.ui-tabbar-box {
|
|
box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
|
|
}
|
|
|
|
.foot {
|
|
height: 100rpx;
|
|
background: var(--ui-BG);
|
|
.rec {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
background: #f3f3f1;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.oval {
|
|
width: 38rpx;
|
|
height: 22rpx;
|
|
background: #f3f3f1;
|
|
border-radius: 11rpx;
|
|
}
|
|
.add-btn {
|
|
width: 214rpx;
|
|
height: 72rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
border-radius: 40rpx 0 0 40rpx;
|
|
background-color: var(--ui-BG-Main-light);
|
|
color: var(--ui-BG-Main);
|
|
}
|
|
|
|
.buy-btn {
|
|
width: 214rpx;
|
|
height: 72rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
|
|
border-radius: 0 40rpx 40rpx 0;
|
|
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
</style>
|