From 1ae5a8aed5c503f17a0d504d75c3a94aa9d10e8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Tue, 6 Jul 2021 11:42:06 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=96=B0=E5=A2=9E]=20=E9=A6=96=E9=A1=B5UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
common/mixin.js | 4 +-
common/styles/common.css | 4 +
pages/index/index.vue | 153 +++++++++++++++++-
.../components/u-lazy-load/u-lazy-load.vue | 2 +
uview-ui/components/u-tabs/u-tabs.vue | 3 +-
5 files changed, 162 insertions(+), 4 deletions(-)
diff --git a/common/mixin.js b/common/mixin.js
index aa88f67..e48c468 100644
--- a/common/mixin.js
+++ b/common/mixin.js
@@ -1,11 +1,11 @@
export default{
data(){
return {
- $pageScrollTop: 0, // 页面距离顶部的距离
+ pageScrollTop: 0, // 页面距离顶部的距离
}
},
onPageScroll(res) {
- this.$pageScrollTop = res.scrollTop;
+ this.pageScrollTop = res.scrollTop;
},
methods: {
$isRight(val){
diff --git a/common/styles/common.css b/common/styles/common.css
index 84950cc..04bd210 100644
--- a/common/styles/common.css
+++ b/common/styles/common.css
@@ -219,6 +219,10 @@
font-weight: bold;
}
+.lf-line-through{
+ text-decoration: line-through;
+}
+
.lf-opacity{
opacity: .5;
}
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 288d53b..c509f51 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -51,6 +51,10 @@
+
+ 土耳其双人游飞机往返酒店五星级各大热门景点豪华双人游纯江湖救急
+ ￥3999.00
+
@@ -78,6 +82,47 @@
+
+
+
+
+
+
+ 已售8777
+
+
+
+ {{item.title}}
+
+
+ {{item.price}}元
+ ¥399.00
+
+
+
+
+
+
+
+ 已售8777
+
+
+
+ {{item.title}}
+
+
+ {{item.price}}元
+ ¥399.00
+
+
+
+
+
+
+
+
+
+
@@ -109,12 +154,28 @@
}
},
onLoad() {
-
+ // this.addRandomData();
},
methods: {
+ addRandomData() {
+ for(let i = 0; i < 10; i++) {
+ let index = this.$u.random(0, this.list.length - 1);
+ // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
+ let item = JSON.parse(JSON.stringify(this.list[index]))
+ item.id = this.$u.guid();
+ this.flowList.push(item);
+ }
+ },
tabChange(current){
this.current = current;
+ },
+ pageChange(event){
+ console.log(event)
+ this.current = event.detail.current;
}
+ },
+ onReachBottom() {
+
},
onPullDownRefresh(){
uni.stopPullDownRefresh();
@@ -225,6 +286,96 @@
.max-recomm-img{
width: 455rpx;
height: 455rpx;
+ position: relative;
+ .recomm-title{
+ // height: 142rpx;
+ height: max-content;
+ width: 100%;
+ background-color: rgba(0,0,0,0.65);
+ box-sizing: border-box;
+ padding: 15rpx;
+ position: absolute;
+ bottom: 0;
+ color: #FFFFFF;
+ }
}
}
+
+ // ====
+ .list-warter {
+ border-radius: 8px;
+ margin: 10px 5px;
+ margin-top: 0px;
+ background-color: #ffffff;
+ // padding: 8px;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .u-close {
+ position: absolute;
+ top: 32rpx;
+ right: 32rpx;
+ }
+
+ .list-image {
+ width: 100%;
+ border-radius: 4px;
+ }
+
+ .list-title {
+ font-size: 28rpx;
+ font-weight: bold;
+ color: $u-main-color;
+ }
+
+ .list-label{
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ background-color: rgba(0,0,0,0.5);
+ width: 140rpx;
+ height: 48rpx;
+ border-radius: 20rpx 0rpx 0rpx 0rpx;
+ font-size: 22rpx;
+ color: #FFFFFF;
+ line-height: 48rpx;
+ text-align: center;
+ }
+
+ .list-tag {
+ display: flex;
+ margin-top: 5px;
+ }
+
+ .list-tag-owner {
+ background-color: $u-type-error;
+ color: #FFFFFF;
+ display: flex;
+ align-items: center;
+ padding: 4rpx 14rpx;
+ border-radius: 50rpx;
+ font-size: 20rpx;
+ line-height: 1;
+ }
+
+ .list-tag-text {
+ border: 1px solid $u-type-primary;
+ color: $u-type-primary;
+ margin-left: 10px;
+ border-radius: 50rpx;
+ line-height: 1;
+ padding: 4rpx 14rpx;
+ display: flex;
+ align-items: center;
+ border-radius: 50rpx;
+ font-size: 20rpx;
+ }
+
+ .list-price {
+ font-size: 30rpx;
+ color: $u-type-error;
+ margin-top: 5px;
+ }
+ // ====
diff --git a/uview-ui/components/u-lazy-load/u-lazy-load.vue b/uview-ui/components/u-lazy-load/u-lazy-load.vue
index 429a680..eaa8471 100644
--- a/uview-ui/components/u-lazy-load/u-lazy-load.vue
+++ b/uview-ui/components/u-lazy-load/u-lazy-load.vue
@@ -12,6 +12,7 @@
+
@@ -229,6 +230,7 @@
.u-wrap {
background-color: #eee;
overflow: hidden;
+ position: relative;
}
.u-lazy-item {
diff --git a/uview-ui/components/u-tabs/u-tabs.vue b/uview-ui/components/u-tabs/u-tabs.vue
index dd33244..36dd5c2 100644
--- a/uview-ui/components/u-tabs/u-tabs.vue
+++ b/uview-ui/components/u-tabs/u-tabs.vue
@@ -84,7 +84,7 @@
// 选中项的主题颜色
activeColor: {
type: String,
- default: '#2979ff'
+ default: '#1998FE'
},
// 未选中项的颜色
inactiveColor: {
@@ -230,6 +230,7 @@
if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
if (index == this.currentIndex) {
style.color = this.activeColor;
+ style.fontSize = '36rpx';
// 给选中的tab item添加外部自定义的样式
style = Object.assign(style, this.activeItemStyle);
} else {