fangwenqiao
/
luoyang-uniapp-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页搭建

master
unknown 8 months ago
parent
ed2d307004
commit
e743738779
5 changed files with 274 additions and 341 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. 19
      components/searchRow/searchRow.vue
  2. 61
      pages/tabbar/index/comp/informaItem.vue
  3. 98
      pages/tabbar/index/comp/schoolItem.vue
  4. 425
      pages/tabbar/index/index.vue
  5. 2
      uni.scss

19
components/searchRow/searchRow.vue
View File

@ -1,5 +1,5 @@
<template>
<view class="searchBg">
<view class="searchBg" :style="{background: `${bg}`}">
<view class="flex">
<view class="searchIcon">
<image src="@/static/images/index/searchIcon.png" mode=""></image>
@ -14,7 +14,21 @@
<script>
export default {
props: ['placeholder', 'disable'],
// props: ['placeholder', 'disable', 'bg'],
props: {
placeholder: {
type: String,
default: ''
},
disable: {
type: Boolean,
default: false
},
bg: {
type: String,
default: '#ddd'
}
},
data() {
return {
keyword: ''
@ -33,7 +47,6 @@
<style lang="scss" scoped>
.searchBg {
background: #8ABAED;
width: 100%;
height: 72rpx;
border-radius: 16rpx;

61
pages/tabbar/index/comp/informaItem.vue
View File

@ -0,0 +1,61 @@
<template>
<view class="flex-b">
<view class="imgBox">
<image :src="item.picture" mode="aspectFill"></image>
</view>
<view class="rightText">
<view class="text towRowText">{{ item.title }}</view>
<view class="date">{{ $u.timeFormat(item.createTime, 'yyyy/mm/dd') }}</view>
</view>
</view>
</template>
<script>
export default {
props: {
item: {
type: Object,
default () {
return {
picture: require('@/static/images/index/img_7@2x.png'),
title: '测试数据',
createTime: new Date()*1
}
}
}
}
}
</script>
<style lang="scss" scoped>
.flex-b {
padding: 30rpx 0 28rpx 0;
.imgBox {
width: 184rpx;
height: 148rpx;
background: linear-gradient(180deg, rgba(0, 122, 255, 0.5) 0%, #007AFF 100%);
border-radius: 6rpx;
overflow: hidden;
}
.rightText {
flex: 1;
padding: 0 0 0 30rpx;
height: 148rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.text {
font-size: 24rpx;
color: #333;
}
.date {
font-size: 20rpx;
color: #686B73;
}
}
}
</style>

98
pages/tabbar/index/comp/schoolItem.vue
View File

@ -0,0 +1,98 @@
<template>
<view class="itemBox" >
<view class="img">
<image src="@/static/images/index/img_7@2x.png" mode="" ></image>
</view>
<view class="textCon">
<view class="name">翔力驾校</view>
<view class="flex-b">
<view class="starBox">
<!-- <u-rate active-color="#1989FA" inactive-color="#1989FA" gutter="1" :size="16" :value="item.stars" :readonly="true" style="pointer-events: none;"></u-rate> -->
<view class="num">5分</view>
</view>
<view class="adr">距您0.6km</view>
</view>
<!-- <view class="credit">行业信用 <text v-if="item.creditrating">{{item.creditrating}}</text></view> {{ $u.utils.distanceFn(item.distance)}}-->
</view>
<callPhone v-if="showPhone" :servicePhone="[{name: item.phone}]">
<view class="pozPhone">
<image src="@/static/images/index/telephone.png" mode=""></image>
</view>
</callPhone>
</view>
</template>
<script>
export default {
props: {
showPhone: {
type: Boolean,
default: true
},
item: {
type: Object,
default: {}
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.itemBox {
background: #FFFFFF;
border-radius: 16rpx;
padding: 24rpx;
position: relative;
display: flex;
margin-bottom: 20rpx;
}
.img {
width: 204rpx;
height: 140rpx;
background: #f6f6f6;
border-radius: 8rpx;
overflow: hidden;
}
.textCon {
flex: 1;
font-size: 24rpx;
padding: 0 0 0 36rpx;
.name {
font-size: 32rpx;
margin-top: 4rpx;
color: #363A44;
font-weight: 600;
min-height: 84rpx;
}
.starBox {
display: flex;
padding: 6rpx 0 6rpx 0;
.num {
color: $themC;
}
}
.credit {
color: #1989FA;
margin-bottom: 4rpx;
}
.adr {
color: #363A44;
}
}
.pozPhone {
position: absolute;
top: 40%;
right: 20rpx;
width: 72rpx;
height: 72rpx;
transform: translateY(-50%);
}
</style>

425
pages/tabbar/index/index.vue
View File

@ -1,44 +1,42 @@
<template>
<view class="main pageBg">
<!-- <button @click="$goPage('/pages/userCenter/login/face')">进入人脸识别</button> -->
<view style="background-color: #2170FD; width: 100%;height: 20rpx;"></view>
<!-- <u-navbar title=" " :bgColor="bgColor" :autoBack="false">
<view class="" slot="left">
<view class="flex">
<view class="adrsIcon">
<image src="@/static/images/index/dingwei.png" mode=""></image>
</view>
<view class="adr">{{ vuex_cityInfo.city }} </view>
</view>
</view>
<view class="rightScan" slot="right">
<view class="scan" @click="scanCodeFn">
<image src="@/static/images/index/scan.png" mode=""></image>
</view>
</view>
</u-navbar> -->
<!-- <button @click="refereshFn">刷新token</button> -->
<view class="TopCon" :style="{ backgroundImage: `url(${imgUrl})`, backgroundSize: backgroundSize }">
<view class="status_bar"></view>
<view class="status_bar"></view>
<view class="TopCon pad" >
<!-- 地址、扫一扫 -->
<!-- #ifdef MP-WEIXIN -->
<view class="flex-b">
<view class="flex">
<view class="adrsCon">
<view class="adrsIcon">
<image src="@/static/images/index/dingwei.png" mode=""></image>
</view>
<view class="adr">{{ vuex_cityInfo.city || '杭州' }} </view>
</view>
<!-- 搜索 -->
<view class="searchCon" @click.capture="$goPage('/pages/indexEntry/findShcool/searchShcool/searchShcool')">
<searchRow placeholder="搜索驾校、教练…" :disable="true"></searchRow>
</view>
<view class="scan" @click="scanCodeFn">
<image src="@/static/images/index/scan.png" mode=""></image>
<image src="@/static/images/index/scan.png" mode="aspectFill"></image>
</view>
</view>
<!-- #endif -->
<!-- 搜索 -->
<view class="searchCon" @click.capture="$goPage('/pages/indexEntry/findShcool/searchShcool/searchShcool')">
<searchRow placeholder="搜索驾校、教练…" :disable="true"></searchRow>
</view>
</view>
<!-- 海报 -->
<view class="banner">
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="swiperInfo" v-if="swiperInfo.length"
:current="current" :mode="mode" :dots-styles="dotsStyles"
field="content">
<swiper class="swiper-box" @change="change" :current="swiperDotIndex" >
<swiper-item v-for="(item, index) in swiperInfo" :key="index" @click="$goPage('/pages/indexEntry/iIndustryInfo/detail/detail?id='+ item.id)">
<view class="swiper-item" :class="'swiper-item' + index">
<view class="imgBox">
<image :src="item.picture" mode="widthFix"></image>
</view>
</view>
</swiper-item>
</swiper>
</uni-swiper-dot>
</view>
<view class="pad">
<!-- 精钢区 -->
<view class="card traTop">
@ -51,67 +49,29 @@
</view>
</view>
</view>
<!-- 更多入口 -->
<view class="card">
<view class="ul3">
<view class="li3" v-for="(item,index) in moreSection" :key="index">
<view class="icon">
<image :src="item.icon" mode=""></image>
</view>
<view class="name">{{ item.text }}</view>
</view>
<!-- 优质驾校 -->
<view class="schoolCon">
<view class="h1" style="margin: 28rpx 0;">优质驾校</view>
<view class="li" v-for="(item,index) in 3" :key="index">
<schoolItem/>
</view>
</view>
<!-- 行业资讯 -->
<view class="card">
<view class="information">
<view class="flex-b border">
<view class="h1">行业资讯</view>
<view class="more" @click="$goPage('/pages/indexEntry/iIndustryInfo/iIndustryInfo')">
<view class="text">更多</view>
<view class="icon">
<u-icon name="arrow-right"></u-icon>
</view>
</view>
</view>
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="swiperInfo" v-if="swiperInfo.length"
:current="current" :mode="mode" style="height: 230rpx;" :dots-styles="dotsStyles"
field="content">
<swiper class="swiper-box" @change="change" :current="swiperDotIndex" style="height: 230rpx;">
<swiper-item v-for="(item, index) in swiperInfo" :key="index" @click="$goPage('/pages/indexEntry/iIndustryInfo/detail/detail?id='+ item.id)">
<view class="swiper-item" :class="'swiper-item' + index">
<view class="flex-b">
<view class="imgBox">
<image :src="item.picture" mode="aspectFill"></image>
</view>
<view class="rightText">
<view class="text towRowText">{{ item.title }}</view>
<view class="date">{{ $u.timeFormat(item.createTime, 'yyyy/mm/dd') }}</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</uni-swiper-dot>
<!-- 行业资讯，政策法规 -->
<view class="information">
<view class="tabs">
<view class="tab active">行业资讯</view>
<view class="tab">政策法规</view>
</view>
</view>
<!-- 服务专区 -->
<view class="card serviceCon">
<view class="h1">服务专区</view>
<view class="ul2">
<view class="li2" v-for="(item,index) in serviceSector" :key="index" :class="'li2Bg' + index" @click="goServiceSector(item)">
<view class="icon">
<image :src="item.icon" mode=""></image>
</view>
<view class="textCon">
<view class="text">{{ item.text }}</view>
<view class="tps">{{ item.tps}}</view>
</view>
<view class="ul">
<view class="li" v-for="(item,index) in 3" :key="index">
<informaItem/>
</view>
</view>
</view>
<view style="height: 20rpx;width: 100%;"></view>
</view>
<u-popup :show="showPrivacy" mode="center" :round="20" >
<privacyPopup @disagree="showPrivacy=false" @agree="showPrivacy=false"></privacyPopup>
</u-popup>
@ -121,7 +81,10 @@
<script>
import { imgUrl } from '@/config/site.config'
import { getarticleList } from '@/config/api.js'
import schoolItem from './comp/schoolItem'
import informaItem from './comp/informaItem'
export default {
components: { schoolItem, informaItem },
data() {
return {
showPrivacy: false,
@ -129,7 +92,7 @@
backgroundSize: '100% 100%',
keywords: '',
entrySection: [{
text: '我要报名',
text: '学车报名',
icon: require('../../../static/images/index/ic_baoming.png'),
url: '/pages/indexEntry/enroll/enroll',
goPage: function (){
@ -146,7 +109,7 @@
}
},
{
text: '找考场',
text: '找教练',
icon: require('../../../static/images/index/ic_kaochang.png'),
url: '/pages/indexEntry/examines/examines',
goPage: ((item)=>{
@ -154,7 +117,7 @@
})
},
{
text: '找驾驶馆',
text: '理论学习',
icon: require('../../../static/images/index/ic_jsg.png'),
url: '/pages/carEntry/simulateAppointment/simulateAppointment',
goPage: ((item)=>{
@ -162,45 +125,12 @@
})
},
{
text: '找陪练',
text: '签到签退',
icon: require('../../../static/images/index/ic_peilian.png'),
goPage: ((item)=>{
this.$u.toast('正在开发中，敬请期待...')
})
},
{
text: '理论学习',
icon: require('../../../static/images/index/ic_lilun.png'),
url: '/pages/indexEntry/theory/theory',
goPage: ((item)=>{
this.$goPage(item.url)
})
},
],
moreSection: [{
text: '摩托车业务',
icon: require('../../../static/images/index/btn_motuoche.png'),
url: '/pages/indexEntry/enroll/enroll'
},
{
text: '考试预约',
icon: require('../../../static/images/index/btn_yuyue.png'),
url: '/pages/indexEntry/findShcool/findShcool'
},
{
text: '交通求助',
icon: require('../../../static/images/index/btn_jiuzhu.png'),
url: '/pages/indexEntry/examines/examines'
},
{
text: '学驾保险',
icon: require('../../../static/images/index/btn_baoxian.png'),
},
{
text: '更多',
icon: require('../../../static/images/index/btn_gengduo.png'),
url: '/pages/indexEntry/theory/theory'
},
}
],
serviceSector: [{
text: '学车指南',
@ -306,13 +236,7 @@
}
this.$goPage(item.url)
},
async goServiceSector(item) {
if(item.text=='咨询投诉') {
const res = this.$store.dispatch('checkLogin')
if(!res) return
}
this.$goPage(item.url)
},
async getarticleListFn() {
const {data: res} = await getarticleList(this.params)
this.swiperInfo = res.list[0].articleManagementDO
@ -397,24 +321,6 @@
.main {
width: 100%;
.flex {
.adrsIcon {
width: 26rpx;
height: 38rpx;
margin-top: 4rpx;
}
.adr {
padding-left: 14rpx;
font-size: 28rpx;
color: #fff;
}
}
.rightScan {
padding-right: 190rpx;
}
.scan {
width: 64rpx;
height: 64rpx;
@ -422,25 +328,43 @@
.TopCon {
width: 100%;
height: 476rpx;
// background: url('../../../static/images/bigImg/index_banner.png') no-repeat;
// background: url('http://192.168.1.20:81/zhili/image/20230809/e7086ccf82ed4aa09d156f2590a50fba.png') no-repeat;
position: relative;
height: 120rpx;
.flex-b {
padding: 10rpx 212rpx 0 50rpx;
display: flex;
height: 100%;
}
.adrsCon {
display: flex;
align-items: center;
width: 180rpx;
height: 100%;
.adrsIcon {
width: 26rpx;
height: 38rpx;
margin-top: 4rpx;
}
.adr {
padding-left: 14rpx;
font-size: 28rpx;
color: #333;
}
}
.searchCon {
position: absolute;
left: 0;
bottom: 68rpx;
padding: 0 28rpx;
width: 100%;
flex:1;
}
.scan {
width: 100rpx;
background-color: #ddd;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
image {
width: 90rpx;
height: 90rpx;
}
}
}
@ -451,13 +375,6 @@
border-radius: 16rpx;
margin-bottom: 20rpx;
&.traTop {
// transform: translateY(-40rpx);
margin-top: -40rpx;
position: relative;
z-index: 9;
}
.ul {
height: 236rpx;
display: flex;
@ -484,174 +401,18 @@
}
}
}
.ul3 {
height: 128rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
border: 2rpx solid #E8E9EC;
border-radius: 16rpx;
.li3 {
// flex: 1;
display: flex;
align-items: center;
flex-direction: column;
.icon {
width: 52rpx;
height: 52rpx;
}
.name {
font-size: 22rpx;
color: #686B73;
padding-top: 2rpx;
text-align: center;
}
}
}
}
}
.information {
padding: 0 20rpx;
height: 320rpx;
.border {
height: 86rpx;
border-bottom: 2px dashed #E8E9EC;
.h1 {
font-size: 28rpx;
color: #333;
}
.more {
font-size: 24rpx;
display: flex;
.text {
// margin-right: 8rpx;
color: #686B73;
}
}
}
.swiper-item {
height: 148rpx;
.flex-b {
padding: 30rpx 0 28rpx 0;
.imgBox {
width: 184rpx;
height: 148rpx;
background: linear-gradient(180deg, rgba(0, 122, 255, 0.5) 0%, #007AFF 100%);
border-radius: 6rpx;
overflow: hidden;
}
.rightText {
flex: 1;
padding: 0 0 0 30rpx;
height: 148rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.text {
font-size: 24rpx;
color: #333;
}
.date {
text-align: right;
font-size: 20rpx;
color: #686B73;
}
}
}
}
}
.serviceCon {
width: 100%;
padding: 0 20rpx 20rpx 20rpx;
.h1 {
font-size: 28rpx;
color: #333;
padding: 0 0 0 20rpx;
font-weight: 500;
line-height: 90rpx;
}
.ul2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.li2 {
width: 48.8%;
display: flex;
align-items: center;
padding: 14rpx 0 14rpx 14rpx;
margin-bottom: 20rpx;
border-radius: 16rpx;
height: 160rpx;
&.li2Bg0 {
background: linear-gradient(180deg, #F7FBFF 0%, #EFF6FF 100%);
}
&.li2Bg1 {
background: linear-gradient(180deg, #FFFAF3 0%, #FFF4EA 100%);
}
&.li2Bg2 {
background: linear-gradient(180deg, #F4FFF5 0%, #F3FFED 100%);
}
&.li2Bg3 {
background: linear-gradient(180deg, #EFFFF9 0%, #E3FFF5 100%);
}
&.li2Bg4 {
background: linear-gradient(180deg, #FAF9FF 0%, #F9F5FF 100%);
}
&.li2Bg5 {
background: linear-gradient(180deg, #FCF9FB 0%, #FFF5F8 100%);
}
&.li2Bg6 {
background: linear-gradient(180deg, #FDFFF3 0%, #F5FFE1 100%);
}
&.li2Bg7 {
background: linear-gradient(180deg, #EDF7FF 0%, #F3F1FF 100%);
}
.icon {
width: 80rpx;
height: 80rpx;
}
.textCon {
// flex: 1;
padding-left: 10rpx;
.text {
font-size: 32rpx;
color: #333;
font-weight: 500;
}
.tps {
margin-top: 6rpx;
font-size: 20rpx;
color: #949494;
}
}
}
.tabs {
display: flex;
padding: 20rpx 0 10rpx 0;
.tab {
font-size: 30rpx;
color: #333;
margin-right: 20rpx;
&.active {
border-bottom: 4px solid $themC
}
}
}

2
uni.scss
View File

@ -77,4 +77,4 @@ $uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;
// 自已定义的
$themC: #1989FA,
$themC: #FC9933,
Write Preview
Loading…
Cancel
Save