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

新增首页UI

test
邓平艺 5 years ago
parent
28adddfb4f
commit
6698496e34
7 changed files with 344 additions and 175 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      App.vue
  2. 113
      common/styles/common.css
  3. 118
      common/styles/theme.css
  4. 2
      manifest.json
  5. 4
      pages.json
  6. 232
      pages/index/index.vue
  7. 49
      uview-ui/components/u-tabs/u-tabs.vue

1
App.vue
View File

@ -117,6 +117,7 @@
<style lang="scss"> <style lang="scss">
@import "@/uview-ui/index.scss"; @import "@/uview-ui/index.scss";
@import '@/common/styles/theme.css';
@import '@/common/styles/common.css'; @import '@/common/styles/common.css';
//底部按钮 //底部按钮

113
common/styles/common.css
View File

@ -1,68 +1,4 @@
/* 公共的 */ /* 公共的 */
/* button */
button::after {
border: 0;
}
/* radio/checkbox */
uni-radio .uni-radio-input {
width: 30rpx;
height: 30rpx;
}
/* #ifdef H5 */
radio .uni-radio-input,
checkbox .uni-checkbox-input {
/* border-radius: 50%; */
transform: scale(0.8);
}
radio .uni-radio-input.uni-radio-input-checked,
checkbox .uni-checkbox-input.uni-checkbox-input-checked {
/* border-radius: 50%; */
border: 1px solid #FE9903 !important;
background: #FE9903 !important;
color: #FFFFFF !important;
}
radio .uni-radio-input.uni-radio-input-checked::before,
checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
font-size: 13px;
}
radio:not([disabled]) .uni-radio-input:hover,
checkbox:not([disabled]) .uni-checkbox-input:hover {
border-color: #d1d1d1 !important;
}
/* #endif */
/* #ifdef APP-PLUS || MP */
radio .wx-radio-input,
checkbox .wx-checkbox-input {
border-radius: 50%;
transform: scale(0.8);
}
radio .wx-radio-input.wx-radio-input-checked,
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
border-radius: 50%;
border: 1px solid #FE9903 !important;
background: #FE9903 !important;
color: #FFFFFF !important;
}
radio .wx-radio-input.wx-radio-input-checked::before,
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
font-size: 18px;
}
radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbox-input:hover {
border-color: #d1d1d1 !important;
}
/* #endif */
/* 常用的 */ /* 常用的 */
.lf-w-100 { .lf-w-100 {
width: 100%; width: 100%;
@ -283,55 +219,6 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
font-weight: bold; font-weight: bold;
} }
.lf-color-primary {
color: #FE9903 !important;
}
.lf-bg-primary {
background: #FE9903 !important;
}
.lf-color-secondary {
color: #FE8800 !important;
}
.lf-bg-secondary {
background: #FE8800 !important;
}
.lf-color-black {
color: #222222 !important;
}
.lf-bg-black {
background: #222222 !important;
}
.lf-color-white {
color: #FFFFFF !important;
}
.lf-bg-white {
background: #FFFFFF !important;
}
.lf-color-gray {
color: #777777 !important;
}
.lf-bg-gray {
background: #777777 !important;
}
.lf-color-price {
color: #FF0000 !important;
}
.lf-color-999{
color: #999999 !important;
}
.lf-color-666{
color: #666666 !important;
}
.lf-opacity{ .lf-opacity{
opacity: .5; opacity: .5;
} }

118
common/styles/theme.css
View File

@ -0,0 +1,118 @@
/* button */
button::after {
border: 0;
}
/* radio/checkbox */
uni-radio .uni-radio-input {
width: 30rpx;
height: 30rpx;
}
/* #ifdef H5 */
radio .uni-radio-input,
checkbox .uni-checkbox-input {
/* border-radius: 50%; */
transform: scale(0.8);
}
radio .uni-radio-input.uni-radio-input-checked,
checkbox .uni-checkbox-input.uni-checkbox-input-checked {
/* border-radius: 50%; */
border: 1px solid #FE9903 !important;
background: #FE9903 !important;
color: #FFFFFF !important;
}
radio .uni-radio-input.uni-radio-input-checked::before,
checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
font-size: 13px;
}
radio:not([disabled]) .uni-radio-input:hover,
checkbox:not([disabled]) .uni-checkbox-input:hover {
border-color: #d1d1d1 !important;
}
/* #endif */
/* #ifdef APP-PLUS || MP */
radio .wx-radio-input,
checkbox .wx-checkbox-input {
border-radius: 50%;
transform: scale(0.8);
}
radio .wx-radio-input.wx-radio-input-checked,
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
border-radius: 50%;
border: 1px solid #FE9903 !important;
background: #FE9903 !important;
color: #FFFFFF !important;
}
radio .wx-radio-input.wx-radio-input-checked::before,
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
font-size: 18px;
}
radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbox-input:hover {
border-color: #d1d1d1 !important;
}
/* #endif */
.lf-color-primary {
color: #FE9903 !important;
}
.lf-bg-primary {
background: #FE9903 !important;
}
.lf-color-secondary {
color: #FE8800 !important;
}
.lf-bg-secondary {
background: #FE8800 !important;
}
.lf-color-black {
color: #222222 !important;
}
.lf-bg-black {
background: #222222 !important;
}
.lf-color-white {
color: #FFFFFF !important;
}
.lf-bg-white {
background: #FFFFFF !important;
}
.lf-color-gray {
color: #777777 !important;
}
.lf-bg-gray {
background: #777777 !important;
}
/* 一些常用的字体颜色 */
.lf-color-price {
color: #FF0000 !important;
}
.lf-color-999{
color: #999999 !important;
}
.lf-color-666{
color: #666666 !important;
}
.lf-color-555{
color: #555555 !important;
}
.lf-color-333{
color: #333333 !important;
}

2
manifest.json
View File

@ -50,7 +50,7 @@
"quickapp" : {}, "quickapp" : {},
/* 小程序特有相关 */ /* 小程序特有相关 */
"mp-weixin" : { "mp-weixin" : {
"appid" : "",
"appid" : "wxb35ef055a4dd8ad4",
"setting" : { "setting" : {
"urlCheck" : false, "urlCheck" : false,
"es6" : true, "es6" : true,

4
pages.json
View File

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

232
pages/index/index.vue
View File

@ -1,8 +1,82 @@
<template> <template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title" v-if="$isRight(true)">{{title}}</text>
<view>
<swiper class="head" :current="banner_current" >
<swiper-item>
<image src="https://picsum.photos/375/360" class="swipe-img"></image>
</swiper-item>
<swiper-item>
<image src="https://picsum.photos/375/360" class="swipe-img"></image>
</swiper-item>
</swiper>
<view class="content">
<!-- 消息模块 -->
<view class="lf-row-between lf-m-b-34 message-box">
<view class="lf-flex">
<u-icon name="lock-fill lf-text-vertical"></u-icon>
<view class="lf-m-l-12 lf-line-1" style="max-width: 510rpx;">国庆优惠大促，快来看看吧！</view>
</view>
<view class="message-btn" hover-class="lf-opacity">详情</view>
</view>
<!-- 频道 -->
<view class="lf-row-between lf-m-b-10">
<view class="lf-font-36 lf-font-bold lf-color-333">添加频道</view>
<view class="lf-flex lf-color-555">
<view class="lf-m-r-10">编辑</view>
<u-icon name="lock-fill lf-text-vertical"></u-icon>
</view>
</view>
<view class="lf-flex-wrap">
<view class="channel-item" v-for="(item, index) in 8">
<image src="../../static/logo.png" class="channel-mask" mode="aspectFill"></image>
<view>
<u-icon name="lock-fill lf-text-vertical"></u-icon>
</view>
</view>
</view>
<!-- 中间广告模块 -->
<swiper class="lf-m-t-40 ad" :current="banner_current" >
<swiper-item>
<image src="https://picsum.photos/375/230" class="lf-w-100 lf-h-100"></image>
</swiper-item>
</swiper>
<!-- 精品推荐 -->
<view class="lf-row-between lf-m-t-40">
<view class="lf-font-36 lf-font-bold lf-color-333">精品推荐</view>
<view class="lf-flex lf-color-555">
<view class="lf-m-r-10">更多</view>
<u-icon name="lock-fill lf-text-vertical"></u-icon>
</view>
</view>
<view class="recomm lf-m-t-20">
<view class="lf-row-between">
<view class="max-recomm-img">
<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
</view>
<view>
<view class="recomm-img">
<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
</view>
<view class="recomm-img lf-m-t-10">
<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
</view>
</view>
</view>
<view class="lf-row-between lf-m-t-10">
<view class="recomm-img">
<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
</view>
<view class="recomm-img">
<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
</view>
<view class="recomm-img">
<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
</view>
</view>
</view>
<!-- tab标签 -->
<view class="lf-m-t-40">
<u-tabs :list="tab_list" :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
</view>
</view> </view>
</view> </view>
</template> </template>
@ -11,42 +85,146 @@
export default { export default {
data() { data() {
return { return {
title: 'Hello'
banner_current: 0,
tab_list: [{
name: '推荐',
list: []
},{
name: '酒店',
list: []
},{
name: '推荐',
list: []
},{
name: '酒店',
list: []
},{
name: '推荐',
list: []
},{
name: '酒店',
list: []
}],
current: 0
} }
}, },
onLoad() { onLoad() {
}, },
methods: { methods: {
tabChange(current){
this.current = current;
}
},
onPullDownRefresh(){
uni.stopPullDownRefresh();
} }
} }
</script> </script>
<style> <style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
page{
background-color: #F6F6F6;
} }
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
</style>
<style lang="scss" scoped>
.head{
width: 750rpx;
height: 360rpx;
.swipe-img{
width: 100%;
height: 100%;
}
} }
.text-area {
display: flex;
justify-content: center;
.content{
width: 750rpx;
// height: 600rpx;
height: max-content;
border-radius: 30rpx 30rpx 0rpx 0rpx;
position: relative;
top: -30rpx;
background-color: #FFFFFF;
box-sizing: border-box;
padding: 40rpx 32rpx 10rpx;
.message-box{
width: 686rpx;
height: 53rpx;
background: #CFE7FD;
border-radius: 27rpx;
color: #1998FE;
box-sizing: border-box;
padding: 0 20rpx;
font-size: 24rpx;
.message-btn{
width: 80rpx;
height: 33rpx;
border-radius: 10rpx;
border: 1rpx solid #1998FE;
text-align: center;
line-height: 31rpx;
}
}
} }
.title {
font-size: 36rpx;
color: #8f8f94;
.channel-item{
width: 160rpx;
height: 160rpx;
border-radius: 15rpx;
margin-top: 15rpx;
margin-right: 15rpx;
position: relative;
overflow: hidden;
&:nth-child(4n){
margin-right: 0;
}
image{
width: 160rpx;
height: 160rpx;
position: absolute;
z-index: 0;
}
view{
position: absolute;
right: 0;
bottom: 0;
background-color: rgba(255,255,255,0.5);
width: 42rpx;
height: 42rpx;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10rpx 0rpx 15rpx 0rpx;
z-index: 2;
}
.channel-mask::after{
width: 100%;
height: 100%;
content: '';
position: absolute;
z-index: 1;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
}
}
.ad{
height: 230rpx;
width: 100%;
}
.recomm{
width: 100%;
height: max-content;
.recomm-img{
width: 222rpx;
height: 222rpx;
border-radius: 10rpx;
}
.max-recomm-img{
width: 455rpx;
height: 455rpx;
}
} }
</style> </style>

49
uview-ui/components/u-tabs/u-tabs.vue
View File

@ -7,11 +7,9 @@
<scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft" scroll-with-animation> <scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft" scroll-with-animation>
<view class="u-scroll-box" :class="{'u-tabs-scorll-flex': !isScroll}"> <view class="u-scroll-box" :class="{'u-tabs-scorll-flex': !isScroll}">
<view class="u-tab-item u-line-1" :id="'u-tab-item-' + index" v-for="(item, index) in list" :key="index" @tap="clickTab(index)" <view class="u-tab-item u-line-1" :id="'u-tab-item-' + index" v-for="(item, index) in list" :key="index" @tap="clickTab(index)"
>
:style="[tabItemStyle(index)]">
<u-badge :count="item[count] || item['count'] || 0" :offset="offset" size="mini"></u-badge> <u-badge :count="item[count] || item['count'] || 0" :offset="offset" size="mini"></u-badge>
<view :class="'anniu' + ' ' + (index == currentIndex?Checked:'')">
{{ item[name] || item['name']}}
</view>
{{ item[name] || item['name']}}
</view> </view>
<view v-if="showBar" class="u-tab-bar" :style="[tabBarStyle]"></view> <view v-if="showBar" class="u-tab-bar" :style="[tabBarStyle]"></view>
</view> </view>
@ -168,9 +166,8 @@
scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离 scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离
parentLeft: 0, // 父元素(tabs组件)到屏幕左边的距离 parentLeft: 0, // 父元素(tabs组件)到屏幕左边的距离
id: this.$u.guid(), // id值 id: this.$u.guid(), // id值
currentIndex: 0,
currentIndex: this.current,
barFirstTimeMove: true, // 滑块第一次移动时(页面刚生成时)，无需动画，否则给人怪异的感觉 barFirstTimeMove: true, // 滑块第一次移动时(页面刚生成时)，无需动画，否则给人怪异的感觉
Checked:'Checked'
}; };
}, },
watch: { watch: {
@ -178,7 +175,7 @@
// 后台获取的（如新闻app顶部的菜单），获取返回需要一定时间，所以list变化时，重新获取布局信息 // 后台获取的（如新闻app顶部的菜单），获取返回需要一定时间，所以list变化时，重新获取布局信息
list(n, o) { list(n, o) {
// list变动时，重制内部索引，否则可能导致超出数组边界的情况 // list变动时，重制内部索引，否则可能导致超出数组边界的情况
if(n.length !== o.length){
if(n.length !== o.length) {
this.currentIndex = 0; this.currentIndex = 0;
}else{ }else{
return; return;
@ -202,13 +199,15 @@
computed: { computed: {
// 移动bar的样式 // 移动bar的样式
tabBarStyle() { tabBarStyle() {
let scrollBarLeft = this.scrollBarLeft - 7;
let style = { let style = {
width: this.barWidth + 'rpx', width: this.barWidth + 'rpx',
transform: `translate(${this.scrollBarLeft}px, -100%)`,
transform: `translate(${scrollBarLeft}px, -100%)`,
// 滑块在页面渲染后第一次滑动时，无需动画效果 // 滑块在页面渲染后第一次滑动时，无需动画效果
'transition-duration': `${this.barFirstTimeMove ? 0 : this.duration }s`, 'transition-duration': `${this.barFirstTimeMove ? 0 : this.duration }s`,
'background-color': this.activeColor, 'background-color': this.activeColor,
height: this.barHeight + 'rpx', height: this.barHeight + 'rpx',
opacity: this.barFirstTimeMove ? 0 : 1,
// 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现 // 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现
'border-radius': `${this.barHeight / 2}px` 'border-radius': `${this.barHeight / 2}px`
}; };
@ -253,15 +252,8 @@
}, },
// 点击某一个tab菜单 // 点击某一个tab菜单
clickTab(index) { clickTab(index) {
this.currentIndex = index;
this.Checked = 'Checked';
// // 点击当前活动tab，不触发事件
// if(index == this.currentIndex){
// this.Checked = 'Checked';
// return ;
// }else{
// this.Checked = '';
// };
// 点击当前活动tab，不触发事件
if(index == this.currentIndex) return ;
// 发送事件给父组件 // 发送事件给父组件
this.$emit('change', index); this.$emit('change', index);
}, },
@ -368,30 +360,21 @@
/* #endif */ /* #endif */
text-align: center; text-align: center;
transition-property: background-color, color; transition-property: background-color, color;
z-index: 2;
} }
.u-tab-bar { .u-tab-bar {
position: absolute; position: absolute;
bottom: 0;
bottom: 10px;
width: 68rpx !important;
height: 10rpx !important;
background: #CFE7FD !important;
border-radius: 5rpx !important;
z-index: 1;
} }
.u-tabs-scorll-flex { .u-tabs-scorll-flex {
@include vue-flex; @include vue-flex;
justify-content: space-between; justify-content: space-between;
} }
.anniu{
// padding:20rpx 58rpx;
background-color: #F5F5F5;
color: #555555;
display: block;
border-radius: 10rpx;
margin-left:10rpx ;
width: 172rpx;
height: 80rpx;
line-height: 80rpx;
}
.Checked{
background-color: #FE9903;
color: #FFFFFF;
}
</style> </style>
Write Preview
Loading…
Cancel
Save