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
Split 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. 220
      pages/index/index.vue
  7. 45
      uview-ui/components/u-tabs/u-tabs.vue

1
App.vue
View File

@ -117,6 +117,7 @@
<style lang="scss">
@import "@/uview-ui/index.scss";
@import '@/common/styles/theme.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 {
width: 100%;
@ -283,55 +219,6 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
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{
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" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"appid" : "wxb35ef055a4dd8ad4",
"setting" : {
"urlCheck" : false,
"es6" : true,

4
pages.json
View File

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

220
pages/index/index.vue
View File

@ -1,8 +1,82 @@
<template>
<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">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title" v-if="$isRight(true)">{{title}}</text>
<!-- 消息模块 -->
<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>
</template>
@ -11,42 +85,146 @@
export default {
data() {
return {
title: 'Hello'
banner_current: 0,
tab_list: [{
name: '推荐',
list: []
},{
name: '酒店',
list: []
},{
name: '推荐',
list: []
},{
name: '酒店',
list: []
},{
name: '推荐',
list: []
},{
name: '酒店',
list: []
}],
current: 0
}
},
onLoad() {
},
methods: {
tabChange(current){
this.current = current;
}
},
onPullDownRefresh(){
uni.stopPullDownRefresh();
}
}
</script>
<style>
page{
background-color: #F6F6F6;
}
</style>
<style lang="scss" scoped>
.head{
width: 750rpx;
height: 360rpx;
.swipe-img{
width: 100%;
height: 100%;
}
}
.content{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
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;
}
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
.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%;
}
.title {
font-size: 36rpx;
color: #8f8f94;
.recomm{
width: 100%;
height: max-content;
.recomm-img{
width: 222rpx;
height: 222rpx;
border-radius: 10rpx;
}
.max-recomm-img{
width: 455rpx;
height: 455rpx;
}
}
</style>

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

@ -7,12 +7,10 @@
<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-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>
<view :class="'anniu' + ' ' + (index == currentIndex?Checked:'')">
{{ item[name] || item['name']}}
</view>
</view>
<view v-if="showBar" class="u-tab-bar" :style="[tabBarStyle]"></view>
</view>
</scroll-view>
@ -168,9 +166,8 @@
scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离
parentLeft: 0, // 父元素(tabs组件)到屏幕左边的距离
id: this.$u.guid(), // id值
currentIndex: 0,
currentIndex: this.current,
barFirstTimeMove: true, // 滑块第一次移动时(页面刚生成时)，无需动画，否则给人怪异的感觉
Checked:'Checked'
};
},
watch: {
@ -202,13 +199,15 @@
computed: {
// 移动bar的样式
tabBarStyle() {
let scrollBarLeft = this.scrollBarLeft - 7;
let style = {
width: this.barWidth + 'rpx',
transform: `translate(${this.scrollBarLeft}px, -100%)`,
transform: `translate(${scrollBarLeft}px, -100%)`,
// 滑块在页面渲染后第一次滑动时，无需动画效果
'transition-duration': `${this.barFirstTimeMove ? 0 : this.duration }s`,
'background-color': this.activeColor,
height: this.barHeight + 'rpx',
opacity: this.barFirstTimeMove ? 0 : 1,
// 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现
'border-radius': `${this.barHeight / 2}px`
};
@ -253,15 +252,8 @@
},
// 点击某一个tab菜单
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);
},
@ -368,30 +360,21 @@
/* #endif */
text-align: center;
transition-property: background-color, color;
z-index: 2;
}
.u-tab-bar {
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 {
@include vue-flex;
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>
Write Preview
Loading…
Cancel
Save