gg
/
WashingCar-frontend-Ver3.0
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'd5d41678be'
${ noResults }
WashingCar-frontend-Ver3.0/pages/networkDetail/networkDetail.vue

441 lines
9.5 KiB
Vue
Raw Blame History

<template>
<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
<scroll-view scroll-y="true" class="networkDetail" >
<view class="ding">
</view>
<view class="uni-margin-wrap">
<swiper class="swiper" :autoplay="true" :indicator-dots="true" indicator-color="rgba(220,192,203,1)"
indicator-active-color="rgba(255,255,255,1)">
<swiper-item class="swiper-item" v-for="(item,index) in banners" :key="index">
<img :src="item" class="img" alt="" />
</swiper-item>
</swiper>
</view>
<view class="boxs">
<view class="mapWindow">
<view class="l">
<view class="title">
<text class="t">中山花园洗车点</text><text class="r">正常营业</text>
</view>
<view class="c">
杭州千年舟家居文化创意港
</view>
<view class="datas-navigation">
<view class="left-d">
<img class="i" src="https://www.jiubaotongxue.love/image/map2.png" alt="" /><text class="colors">5.4km|</text>
</view>
<view class="left-x">
<img class="i" src="https://www.jiubaotongxue.love/image/map2.png" alt="" /><text class="colors">站点维修</text>
</view>
</view>
<view class="datas-state">
<view class="sum">
24小时营业
</view>
<view class="surplus">
出入无忧
</view>
</view>
</view>
<view class="right-m">
<view class="box">
<img class="ic" src="https://www.jiubaotongxue.love/image/demo10.png" alt="" />
<view class="txt">
导航
</view>
</view>
</view>
</view>
<view class="nav-title">
<img class="nav-img-left" src="https://www.jiubaotongxue.love/image/demo7.png" alt="" />
<text class="t">团购核销入口</text>
<view class="nav-btn">
进入
</view>
</view>
</view>
<view class="state">
<view class="title">
<view class="lines">
</view>
<text class="txt">洗车工位</text>
</view>
<view class="machine">
<view class="machine-flex" v-for="(item,index) in status" :key="item.id">
<img class="i" src="https://www.jiubaotongxue.love/image/bannas.png" alt="" />
<view class="flex-box" :class="{iSshow1: item.msgCode === 2, iSshow2: item.msgCode === 3 }">
<view class="show">
车位{{item.num}}
</view>
<view class="shows">
{{item.msg}}
</view>
</view>
</view>
<view class="ding">
</view>
</view>
</view>
</scroll-view>
</template>
<script setup>
import {ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
const titles = ref('网点详情')
const bgcolor = ref('#aaa')
const color = ref('#000')
onLoad(() => {
titles.value = '网点详情'
bgcolor.value = '#fff'
color.value = '#000'
})
const banners = ref(['https://www.jiubaotongxue.love/image/bannas.png',
'https://ts1.cn.mm.bing.net/th/id/R-C.c1c536c60766315effcf7473734265c8?rik=BJnvGw%2fMafvL5w&riu=http%3a%2f%2fdesk.fd.zol-img.com.cn%2ft_s960x600c5%2fg2%2fM00%2f0E%2f09%2fCg-4WlVsB-GII_QDACASGpf7ol4AAEeNQPDq30AIBIy241.jpg&ehk=rmAXHBKBoEX%2bHmHxwM1UvcjGF3rxRv5booeLLpySEys%3d&risl=&pid=ImgRaw&r=0',
'https://pic1.zhimg.com/v2-9db7bf3b825f2db103a534ca59c75481_r.jpg?source=1940ef5c'
])
const status = ref([{
id:1,
msg:"空闲中",
msgCode:1,
num:1
},
{
id:2,
msg:"使用中",
msgCode:2,
num:2
},
{
id:3,
msg:"损坏",
msgCode:3,
num:3
}
])
</script>
<style lang="scss">
.networkDetail{
width: 100%;
height: 100%;
position: absolute;
background-color: #eeeeee;
.ding{
width: 100%;
height: 11%;
}
.uni-margin-wrap {
position: relative;
width: 100%;
height: 560rpx;
.swiper {
width: 100%;
height: 100%;
.swiper-item {
width: 100%;
height: 100%;
.img {
width: 100%;
height: 100%;
}
}
}
}
.boxs {
width: 690rpx;
height: 410rpx;
background: #FFFFFF;
border-radius: 20rpx;
position: relative;
margin-top: -60rpx;
margin-left: 50%;
transform: translateX(-50%);
.mapWindow{
width: 100%;
height: 266rpx;
position: relative;
bottom: 0rpx;
border-radius: 20rpx;
display:flex;
justify-content: space-between;
background-color: #feffff;
z-index: 999;
.l{
width: 600rpx;
height: 202rpx;
.title{
width: 100%;
height: 48rpx;
line-height: 48rpx;
display:flex;
margin-top: 30rpx;
.t{
display: block;
font-size: 34rpx;
font-weight: 600;
margin-left: 42rpx;
}
.r{
display: block;
width: 108rpx;
height: 36rpx;
background: linear-gradient( 135deg, #FEB44C 0%, #FF8833 100%);
font-size: 22rpx;
text-align: center;
line-height: 36rpx;
color: white;
margin-left: 38rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
}
.c{
width: 100%;
font-size: 24rpx;
line-height: 24rpx;
height: 34rpx;
box-sizing: border-box;
padding-left:42rpx;
margin-top: 20rpx;
}
.datas-navigation{
width: 100%;
height: 38rpx;
display: flex;
align-items: center;
margin-top: 15rpx;
.left-d{
// width: 40%;
height: 38rpx;
display: flex;
align-items: center;
// background-color: rebeccapurple;
margin-left: 42rpx;
.i{
width: 24rpx;
height: 24rpx;
// background-color: red;
}
.colors{
font-size: 24rpx;
}
}
.left-x{
// width: 40%;
height: 38rpx;
display: flex;
align-items: center;
// background-color: rebeccapurple;
margin-left: 5rpx;
.i{
width: 24rpx;
height: 24rpx;
// background-color: red;
}
.colors{
font-size: 24rpx;
}
}
}
.datas-state{
width: 100%;
height: 90rpx;
position: relative;
display: flex;
align-items: center;
color: white;
.sum{
width: 138rpx;
height: 36rpx;
color: #4993FF;
font-size: 22rpx;
border: 1rpx solid #4993FF;
text-align: center;
line-height: 36rpx;
margin-left: 42rpx;
border-radius: 7rpx 7rpx 7rpx 7rpx;
}
.surplus{
width: 138rpx;
height: 36rpx;
color: #42BE45;
border: 1rpx solid #42BE45;
font-size: 22rpx;
text-align: center;
line-height: 36rpx;
margin-left: 20rpx;
border-radius: 7rpx 7rpx 7rpx 7rpx;
}
}
}
.right-m{
width: 30%;
height: 266rpx;
position: relative;
.box{
position: absolute;
top: 50%;
right: 56rpx;
transform: translateY(-50%);
.ic{
width: 76rpx;
height: 76rpx;
}
.txt{
width: 76rpx;
font-size: 24rpx;
text-align: center;
color: #3377FF;
}
}
}
}
.nav-title {
position: relative;
width: 630rpx;
height: 100rpx;
background: rgba(71, 144, 255, 0.12);
border-radius: 20rpx;
margin-left: 50%;
margin-top: 10rpx;
transform: translateX(-50%);
border-radius: 30rpx 30rpx 30rpx 30rpx;
display: flex;
// justify-content: space-between;
align-items: center;
font-size: 28rpx;
.nav-img-left {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
margin-left: 32rpx;
}
.t{
display: block;
margin-left: 24rpx;
color: #4D97FF;
// font-weight: 600;
font-size: 36rpx;
}
.nav-btn {
width: 112rpx;
height: 48rpx;
background: linear-gradient(135deg, #4D97FF 0%, #3377FF 100%), #D8D8D8;
border-radius: 8rpx;
line-height: 48rpx;
color: white;
text-align: center;
margin-left: 156rpx;
}
}
}
.state{
width: 100%;
position: relative;
background-color: #fff;
margin-top: 20rpx;
.title{
width: 100%;
height:100rpx;
position: relative;
display: flex;
align-items: center;
.lines{
width: 10rpx;
height: 24rpx;
background-color: #4993FF;
border-radius: 100rpx 100rpx 100rpx 100rpx;
margin-left: 30rpx;
}
.txt{
display: block;
margin-left: 20rpx;
line-height: 100rpx;
font-size: 36rpx;
font-weight: 500;
}
}
.machine{
width: 100%;
background-color: #fff;
font-size: 26rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
.machine-flex{
width:330rpx;
height: 256rpx;
margin-left: 30rpx;
margin-top: 30rpx;
.i{
width: 330rpx;
height: 180rpx;
border-radius: 25rpx 25rpx 25rpx 25rpx;
}
.flex-box{
width: 278rpx;
height: 60rpx;
position: relative;
margin-left: 50%;
transform: translateX(-50%);
background-color: #afe3b1;
text-align: center;
line-height: 60rpx;
display: flex;
margin-top: 16rpx;
border-radius:65rpx 65rpx 65rpx 65rpx;
.show{
width: 139rpx;
height: 60rpx;
border-radius:65rpx 0rpx 0rpx 65rpx;
color: white;
}
.shows{
width: 139rpx;
height: 55rpx;
line-height: 55rpx;
background-color:#ffffff;
border-radius:65rpx 65rpx 65rpx 65rpx ;
color:#42BE45;
margin-top: 4rpx;
}
}
.iSshow1{
background-color: #FFA9A9;
.shows{
color: #FF3232;
}
}
.iSshow2{
background-color: #EEC9AC;
.shows{
color: #FF953A;
}
}
}
.ding{
width: 100%;
height: 100rpx;
}
}
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink