karlcarlo
a5c5d753b6
- 新增大量图片资源，包括图标、背景图、海报等，用于页面展示 - 添加字体文件及样式配置，支持自定义字体 - 引入 uni-ui 组件库，包括图标、弹窗、日期选择器等常用组件 - 添加网络状态监听、加密工具等基础工具函数 - 配置 Vuex 状态管理，包括购物车数量、热门搜索词等 - 增加页面组件，如用户协议、分销信息、提现状态等 - 配置项目构建和忽略文件，优化开发体验
130 lines
2.5 KiB
Vue
130 lines
2.5 KiB
Vue
<template>
|
|
<view class="skeleton">
|
|
<!-- #ifdef MP || APP -->
|
|
<view class="blank"></view>
|
|
<!-- #endif -->
|
|
<view class="header acea-row row-between-wrapper">
|
|
<view class="left"></view>
|
|
<view class="right"></view>
|
|
</view>
|
|
<view class="tabNav acea-row row-between-wrapper">
|
|
<view class="item"></view>
|
|
<view class="item"></view>
|
|
<view class="item"></view>
|
|
<view class="item"></view>
|
|
</view>
|
|
<view class="swipers"></view>
|
|
<view class="nav acea-row row-between-wrapper">
|
|
<view class="item"></view>
|
|
<view class="item"></view>
|
|
<view class="item"></view>
|
|
<view class="item"></view>
|
|
<view class="item"></view>
|
|
</view>
|
|
<view class="nav acea-row row-between-wrapper">
|
|
<view class="item"></view>
|
|
<view class="item"></view>
|
|
<view class="item"></view>
|
|
<view class="item"></view>
|
|
<view class="item"></view>
|
|
</view>
|
|
<view class="header acea-row row-between-wrapper">
|
|
<view class="left"></view>
|
|
<view class="right"></view>
|
|
</view>
|
|
<view class="coupon acea-row row-between-wrapper">
|
|
<view class="item"></view>
|
|
<view class="item"></view>
|
|
</view>
|
|
<view class="goodList">
|
|
<view class="item acea-row row-between row-top">
|
|
<view class="pictrue"></view>
|
|
<view class="text">
|
|
<view class="name"></view>
|
|
<view class="money"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.skeleton{
|
|
padding: 0 30rpx;
|
|
.blank{
|
|
width: 100%;
|
|
height: 150rpx;
|
|
background-color: #F5F5F5;
|
|
}
|
|
.header{
|
|
.left{
|
|
width: 200rpx;
|
|
height: 50rpx;
|
|
background-color: #e9e9e9;
|
|
}
|
|
.right{
|
|
width: 460rpx;
|
|
height: 50rpx;
|
|
background-color: #e9e9e9;
|
|
}
|
|
}
|
|
.tabNav{
|
|
margin-top: 20rpx;
|
|
.item{
|
|
width: 150rpx;
|
|
height: 50rpx;
|
|
background-color: #e9e9e9;
|
|
}
|
|
}
|
|
.swipers{
|
|
margin-top: 20rpx;
|
|
width: 100%;
|
|
height: 400rpx;
|
|
background-color: #e9e9e9;
|
|
}
|
|
.nav{
|
|
margin: 20rpx 0;
|
|
.item{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
background-color: #e9e9e9;
|
|
}
|
|
}
|
|
.coupon{
|
|
margin-top: 20rpx;
|
|
.item{
|
|
width: 330rpx;
|
|
height: 120rpx;
|
|
background-color: #e9e9e9;
|
|
}
|
|
}
|
|
.goodList{
|
|
margin-top: 20rpx;
|
|
.item{
|
|
.pictrue{
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
background-color: #e9e9e9;
|
|
}
|
|
.text{
|
|
.name{
|
|
width: 440rpx;
|
|
height: 76rpx;
|
|
background-color: #e9e9e9;
|
|
}
|
|
.money{
|
|
width: 100rpx;
|
|
height: 34rpx;
|
|
background-color: #e9e9e9;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|