Augcl
/
rice-front
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

更新

master
linyumoya 4 months ago
parent
a559486c0e
commit
2cb131595c
8 changed files with 327 additions and 73 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +126
    -4
      pages/index/center.vue
  2. +201
    -69
      pages/index/index.vue
  3. BIN
      static/image/center/13.png
  4. BIN
      static/image/center/14.png
  5. BIN
      static/image/center/15.png
  6. BIN
      static/image/center/16.png
  7. BIN
      static/image/center/17.png
  8. BIN
      static/image/home/8.png

+ 126
- 4
pages/index/center.vue View File

@ -30,15 +30,59 @@
<view>查看权益></view> <view>查看权益></view>
</view> </view>
<view class="deposit"> <view class="deposit">
<view class="">
<view class="box">
<view> <view>
<view>1.00</view>
<view>收益明细</view>
<view class="num">1.00</view>
<view class="text">收益明细(元)</view>
</view> </view>
<view>收益明细</view>
<view class="boxs">收益明细</view>
</view>
<view class="box">
<view>
<view class="num">1.00</view>
<view class="text">余额(元)</view>
</view>
<view class="boxs">去充值</view>
</view>
<view class="box">
<view>
<view class="num" style="border: none;">1.00</view>
<view class="text">可提现(元)</view>
</view>
<view class="boxs">去提现</view>
</view> </view>
</view> </view>
</view>
<view class="myOrder">
<view>我的订单</view>
<view>查看全部></view>
</view>
<view class="order">
<view class="box">
<view class="boxs">
<image src="../../static/image/center/13.png" mode="aspectFill" />
<view>待付款</view>
</view>
<view class="boxs">
<image src="../../static/image/center/14.png" mode="aspectFill" />
<view>已付款</view>
</view>
<view class="boxs">
<image src="../../static/image/center/15.png" mode="aspectFill" />
<view>待发货</view>
</view>
<view class="boxs">
<image src="../../static/image/center/16.png" mode="aspectFill" />
<view>已发货</view>
</view>
<view class="boxs">
<image src="../../static/image/center/17.png" mode="aspectFill" />
<view>已完成</view>
</view>
</view>
</view> </view>
<!-- 酒店 --> <!-- 酒店 -->
@ -222,10 +266,88 @@
} }
.deposit { .deposit {
display: flex;
justify-content: space-around;
align-items: center;
height: 300rpx; height: 300rpx;
margin-top: -20rpx; margin-top: -20rpx;
background-color: rgb(163, 201, 80); background-color: rgb(163, 201, 80);
border-radius: 40rpx; border-radius: 40rpx;
.box {
display: flex;
height: 80%;
padding: 0rpx 30rpx;
text-align: center;
flex-direction: column;
justify-content: space-around;
color: #fff;
.num {
font-size: 48rpx;
border-right: 2rpx dashed;
width: 100%;
padding: 0 30rpx 0 0;
}
.text {
font-size: 20rpx;
}
.boxs {
font-size: 32rpx;
background-color: rgb(252, 213, 157);
padding: 14rpx 20rpx;
border-radius: 30rpx;
color: #aa5500;
font-weight: 600;
}
}
}
}
.myOrder {
display: flex;
width: 94%;
margin-left: 3%;
align-items: center;
justify-content: space-between;
padding: 20rpx 0;
view:nth-child(1) {
font-weight: 600;
font-size: 32rpx;
border-left: 7rpx solid #A3D250;
}
view:nth-child(2) {
font-size: 28rpx;
color: #A3D250;
}
view {
padding: 0 20rpx;
}
}
.order {
display: flex;
align-items: center;
justify-content: center;
width: 94%;
margin-left: 3%;
background-color: #fff;
border-radius: 16rpx;
.box {
display: flex;
width: 100%;
justify-content: space-around;
padding: 70rpx 0 90rpx;
} }
} }


+ 201
- 69
pages/index/index.vue View File

@ -1,49 +1,68 @@
<template> <template>
<view class="page"> <view class="page">
<navbar bgColor="#88D259"/>
<navbar bgColor="#88D259" />
<view class="bg-color"></view> <view class="bg-color"></view>
<view class="page-title"> <view class="page-title">
三只青蛙 三只青蛙
</view> </view>
<view class="search"> <view class="search">
<uv-search
placeholder="搜你喜欢的产品"
bgColor="#fff"
v-model="keyword"></uv-search>
<uv-search placeholder="搜你喜欢的产品" bgColor="#fff" v-model="keyword"></uv-search>
</view> </view>
<view class="swipe"> <view class="swipe">
<uv-swiper
:list="bannerList"
indicator
height="320rpx"
keyName="url"></uv-swiper>
<uv-swiper :list="bannerList" indicator height="320rpx" keyName="url"></uv-swiper>
</view> </view>
<view class="notice"> <view class="notice">
<uv-notice-bar :text="notice"></uv-notice-bar>
<uv-notice-bar fontSize="32rpx" :text="notice"></uv-notice-bar>
</view> </view>
<view class="menu"> <view class="menu">
<uv-grid :border="false" :col="4"> <uv-grid :border="false" :col="4">
<uv-grid-item v-for="(item,index) in baseList"
:key="index">
<uv-grid-item v-for="(item,index) in baseList" :key="index">
<image :src="item.image" mode=""></image> <image :src="item.image" mode=""></image>
<text class="menu-text">{{item.title}}</text> <text class="menu-text">{{item.title}}</text>
</uv-grid-item> </uv-grid-item>
</uv-grid> </uv-grid>
</view> </view>
<PrivacyAgreementPoup/>
<tabber select="home"/>
<view class="map">
<image src="../../static/image/home/8.png" mode="aspectFill" />
</view>
<view class="commodity" v-for="(item,index) in 10" :key="index">
<view class="box">
<view class="top">
<view class="top-text">
<view>Experience the product 体验产品</view>
<view>体验产品 ___ _</view>
</view>
</view>
<view class="centre">
<view class="boxs">
<view class="box-text">
<view>三只青蛙低GI大米</view>
<view>5斤每盒*3盒</view>
<text class="text1">225</text>
<text class="text2">原价375</text>
</view>
<view class="box-img">
<image src="../../static/logo.png" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
</view>
<PrivacyAgreementPoup />
<tabber select="home" />
</view> </view>
</template> </template>
@ -51,75 +70,73 @@
import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue' import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
import Position from '@/utils/position.js' import Position from '@/utils/position.js'
import tabber from '@/components/base/tabbar.vue' import tabber from '@/components/base/tabbar.vue'
import { mapGetters } from 'vuex'
import {
mapGetters
} from 'vuex'
export default { export default {
components : {
components: {
tabber, tabber,
PrivacyAgreementPoup, PrivacyAgreementPoup,
}, },
data() { data() {
return { return {
area: '长沙', area: '长沙',
notice : '长沙市刘师傅在服务过程中客户投诉“服务过程中有不文明的行为”.....',
bannerList: [
{
notice: '长沙市刘师傅在服务过程中客户投诉“服务过程中有不文明的行为”.....',
bannerList: [{
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
},
},
{ {
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png', url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
},
},
{ {
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
}, },
], ],
baseList : [
{
image : '/static/image/home/0.png',
title : '关于我们',
baseList: [{
image: '/static/image/home/0.png',
title: '关于我们',
}, },
{ {
image : '/static/image/home/1.png',
title : '产品介绍',
image: '/static/image/home/1.png',
title: '产品介绍',
}, },
{ {
image : '/static/image/home/2.png',
title : '促销活动',
image: '/static/image/home/2.png',
title: '促销活动',
}, },
{ {
image : '/static/image/home/3.png',
title : '商城',
image: '/static/image/home/3.png',
title: '商城',
}, },
{ {
image : '/static/image/home/4.png',
title : '邀请好友',
image: '/static/image/home/4.png',
title: '邀请好友',
}, },
{ {
image : '/static/image/home/5.png',
title : '新闻中心',
image: '/static/image/home/5.png',
title: '新闻中心',
}, },
{ {
image : '/static/image/home/6.png',
title : '校企合作',
image: '/static/image/home/6.png',
title: '校企合作',
}, },
{ {
image : '/static/image/home/7.png',
title : '联系我们',
image: '/static/image/home/7.png',
title: '联系我们',
}, },
], ],
productList: [], productList: [],
keyword : '',
keyword: '',
} }
}, },
computed : {
},
methods: {
}
computed: {},
methods: {}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.page{
.bg-color{
.page {
.bg-color {
width: 100%; width: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
@ -127,11 +144,13 @@
height: 550rpx; height: 550rpx;
background: linear-gradient(to bottom, #88D259, #88D259, #fff); background: linear-gradient(to bottom, #88D259, #88D259, #fff);
} }
.page-title{
.page-title {
position: relative; position: relative;
margin-left: 30rpx; margin-left: 30rpx;
margin-bottom: 30rpx; margin-bottom: 30rpx;
} }
.search { .search {
position: relative; position: relative;
background: #FFFFFF; background: #FFFFFF;
@ -140,42 +159,155 @@
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
display: flex; display: flex;
align-items: center; align-items: center;
/deep/ .uv-search__action{
/deep/ .uv-search__action {
background-color: $uni-color; background-color: $uni-color;
color: #FFFFFF; color: #FFFFFF;
padding: 10rpx 20rpx; padding: 10rpx 20rpx;
border-radius: 30rpx; border-radius: 30rpx;
} }
} }
.swipe{
.swipe {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-radius: 20rpx; border-radius: 20rpx;
margin: 20rpx; margin: 20rpx;
} }
.menu{
.menu {
margin: 20rpx; margin: 20rpx;
border-radius: 20rpx; border-radius: 20rpx;
padding: 20rpx; padding: 20rpx;
background-color: #fff; background-color: #fff;
box-shadow: 0 0 10rpx 10rpx #00000009; box-shadow: 0 0 10rpx 10rpx #00000009;
image{
image {
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
margin-top: 10rpx; margin-top: 10rpx;
} }
.menu-text{
.menu-text {
font-size: 28rpx; font-size: 28rpx;
margin-bottom: 10rpx; margin-bottom: 10rpx;
margin-top: 10rpx; margin-top: 10rpx;
} }
} }
.notice{
.notice {
margin: 0 20rpx; margin: 0 20rpx;
/deep/ .uv-notice-bar{
/deep/ .uv-notice-bar {
background: linear-gradient(to right, #f9edc9, #dfedd6); background: linear-gradient(to right, #f9edc9, #dfedd6);
border-radius: 16rpx;
}
/deep/ .uv-notice {
padding: 14rpx 0;
}
/deep/ .uv-icon__icon {
font-size: 36rpx !important;
color: #000 !important;
}
}
.map {
margin: 20rpx;
height: 100rpx;
border-radius: 16rpx;
image {
width: 100%;
height: 100%;
}
}
.commodity {
display: flex;
justify-content: center;
align-items: center;
margin: 20rpx;
border-radius: 16rpx;
background-color: #fff;
.box {
width: 100%;
margin: 20rpx;
.top {
display: flex;
border-left: 6rpx solid #A3D250;
.top-text {
margin-left: 20rpx;
view:nth-child(1) {
font-size: 24rpx;
color: #474747;
}
view:nth-child(2) {
font-size: 32rpx;
color: #A3D250;
font-weight: 600;
}
}
}
}
.centre {
margin: 40rpx 20rpx;
display: flex;
align-items: center;
justify-content: center;
.boxs {
display: flex;
width: 100%;
.box-text,
.box-img {
flex: 1;
}
.box-text {
view:nth-child(1) {
font-size: 32rpx;
font-weight: 500;
margin-top: 30rpx;
}
view:nth-child(2) {
font-size: 28rpx;
color: #CCCCCC;
margin-bottom: 30rpx;
}
.text1 {
color: red;
font-size: 68rpx;
}
.text2 {
font-size: 28rpx;
color: #CCCCCC;
}
}
.box-img {
image {
height: 100%;
width: 100%;
}
}
}
} }
} }
} }
</style>
</style>

BIN
static/image/center/13.png View File

Before After
Width: 200  |  Height: 200  |  Size: 8.6 KiB

BIN
static/image/center/14.png View File

Before After
Width: 200  |  Height: 200  |  Size: 6.7 KiB

BIN
static/image/center/15.png View File

Before After
Width: 200  |  Height: 200  |  Size: 5.3 KiB

BIN
static/image/center/16.png View File

Before After
Width: 200  |  Height: 200  |  Size: 5.4 KiB

BIN
static/image/center/17.png View File

Before After
Width: 200  |  Height: 200  |  Size: 6.0 KiB

BIN
static/image/home/8.png View File

Before After
Width: 1420  |  Height: 234  |  Size: 57 KiB

Write Preview
Loading…
Cancel
Save