Leadfyy.co
/
uniapp-shikongwang
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[添加] 公共样式文件 

[优化] 优化首页样式
master
LAPTOP-D7TKRI82\邓 4 years ago
parent
12f51e781f
commit
3567f43cff
6 changed files with 2494 additions and 99 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 42
      App.vue
  2. 2366
      common/styles/common.css
  3. 6
      main.js
  4. 3
      pages.json
  5. 25
      pages/goodsDetail/goodsDetail.vue
  6. 151
      pages/index/index.vue

42
App.vue
View File

@ -17,5 +17,47 @@
@import './colorui/main.css';
@import './colorui/icon.css';
@import "@/colorui/animation.css";
@import '@/common/styles/common.css';
/*每个页面公共css */
// loading加载
.loading-more {
align-items: center;
justify-content: center;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
font-size: 28rpx;
color: #999;
}
.loading-more-text::before {
content: '';
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
-webkit-animation: weuiLoading 1s steps(12, end) infinite;
animation: weuiLoading 1s steps(12, end) infinite;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
background-size: 100%;
}
@-webkit-keyframes weuiLoading {
0% {
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
@keyframes weuiLoading {
0% {
transform: rotate3d(0, 0, 1, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 360deg);
}
}
</style>

2366
common/styles/common.css
File diff suppressed because it is too large
View File

6
main.js
View File

@ -20,7 +20,11 @@ Vue.component('mescroll-body', MescrollBody)
//骨架屏
import Skeleton from './components/my-uni-skeleton/index.vue'
Vue.component('skeleton', Skeleton)
Vue.component('skeleton', Skeleton);
// 无数据
import myNocontent from './components/my-nocontent/my-nocontent.vue';
Vue.component('my-nocontent', myNocontent);
// //金融数字
// import aMount from './components/amount/index.vue'

3
pages.json
View File

@ -6,7 +6,8 @@
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
"navigationBarTitleText": "首页",
"enablePullDownRefresh": true
}
},
{

25
pages/goodsDetail/goodsDetail.vue
View File

@ -0,0 +1,25 @@
<template>
<view>
</view>
</template>
<script>
export default {
data(){
return {
}
},
onLoad(){
},
methods: {
}
}
</script>
<style lang="scss" scoped="scoped">
</style>

151
pages/index/index.vue
View File

@ -1,70 +1,33 @@
<template>
<view class="content">
<view class="lf-row-center lf-flex-column">
<view class="ctab">
<u-tabs :list="list" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
<u-tabs :list="tab_list" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
</view>
<view class="com">
<view class="list">
<view class="com" v-for="(tab, tabIndex) in tab_list" v-if="tabIndex == current" :key="tabIndex">
<view class="lf-row-between list" v-for="(item, index) in tab.list" :key="index">
<view class="left">
<image src="../../static/tu.png" mode=""></image>
</view>
<view class="right">
<view class="title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
<view class="tips">
<view class="lf-line-2 title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
<view class="lf-row-between tips">
<view class="u-line-progress">
<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
</view>
<text class="progress">已抢25%</text>
<text class="bought">2.4万人已购买</text>
</view>
<view class="price">
<view class="lf-row-between price">
<text>￥</text><text>19</text>.<text>90</text>
<text>￥39.00</text>
<button>立即抢购</button>
</view>
</view>
</view>
<view class="list">
<view class="left">
<image src="../../static/tu.png" mode=""></image>
</view>
<view class="right">
<view class="title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
<view class="tips">
<view class="u-line-progress">
<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
</view>
<text class="progress">已抢25%</text>
<text class="bought">2.4万人已购买</text>
</view>
<view class="price">
<text>￥</text><text>19</text>.<text>90</text>
<text>￥39.00</text>
<button>立即抢购</button>
</view>
</view>
</view>
<view class="list">
<view class="left">
<image src="../../static/tu.png" mode=""></image>
</view>
<view class="right">
<view class="title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
<view class="tips">
<view class="u-line-progress">
<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
</view>
<text class="progress">已抢25%</text>
<text class="bought">2.4万人已购买</text>
</view>
<view class="price">
<text>￥</text><text>19</text>.<text>90</text>
<text>￥39.00</text>
<button>立即抢购</button>
</view>
</view>
<!-- 加载 -->
<view class="loading-more">
<text v-if="tab.list.length" :class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
<my-nocontent v-else></my-nocontent>
</view>
</view>
</view>
@ -73,23 +36,43 @@
<script>
export default {
data() {
let shared = {
loadingClass: false,
loadingText: '没有更多数据啦~',
page: 1,
isPage: true
}
return {
list: [{
name: '推荐'
tab_list: [{
name: '推荐',
list: [1, 2, 3],
...shared
}, {
name: '每日必抢'
name: '每日必抢',
list: [],
...shared
}, {
name: '生活用品'
name: '生活用品',
list: [1],
...shared
},{
name: '家政服务'
name: '家政服务',
list: [],
...shared
},{
name: '美食部落'
name: '美食部落',
list: [],
...shared
},{
name: '奶茶夏日'
name: '奶茶夏日',
list: [],
...shared
},{
name: '奶茶夏日'
name: '奶茶夏日',
list: [],
...shared
}],
current: 0
current: 0, // tab下表
}
},
onLoad() {
@ -99,49 +82,31 @@
change(index) {
this.current = index;
},
},
onReachBottom(){
console.log("页面触底")
},
onPullDownRefresh(){
console.log("下拉刷新");
uni.stopPullDownRefresh()
}
}
</script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 100rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 28rpx;
color: $u-content-color;
}
.button-demo {
margin-top: 80rpx;
}
.link-demo {
margin-top: 80rpx;
}
// tab
.ctab{
width: 100%;
margin: 20rpx 0 0rpx 0rpx;
padding: 0 22rpx;
}
// 商品列表
.com{
width: 100%;
overflow: hidden;
@ -151,9 +116,9 @@
margin: 20rpx 32rpx;
background-color: #FFFFFF;
box-shadow:0 0 10px 5px #e5e5e5;
align-items: flex-start;
.left{
overflow: hidden;
float: left;
image{
width: 204rpx;
height: 204rpx;
@ -163,24 +128,18 @@
}
.right{
overflow: hidden;
width: 64%;
.title{
margin: 18rpx 20rpx 0 0;
overflow: hidden;
color: #222222;
font-size: 32rpx;
height: 80rpx;
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.tips{
margin: 16rpx 0;
overflow: hidden;
.u-line-progress{
width: 112rpx;
overflow: hidden;float: left;
overflow: hidden;
margin-right:20rpx ;
}
.progress{
@ -190,7 +149,6 @@
.bought{
color: #777777;
font-size: 24rpx;
float: right;
margin-right: 20rpx;
}
}
@ -221,14 +179,13 @@
font-weight: 400;
}
button{
width: 176rpx;
width: 160rpx;
height: 60rpx;
background: #FE9903;
border-radius: 15px;
font-size: 24rpx;
color: #FFFFFF;
float: right;
margin: 10rpx 20rpx 20rpx 20rpx;
margin: 0rpx 20rpx 0rpx 20rpx;
border: none;
}
}

Write Preview
Loading…
Cancel
Save