first commit
This commit is contained in:
PC-202306242200\Administrator
178
components/orderList/orderList.vue
Normal file
178
components/orderList/orderList.vue
Normal file
File diff suppressed because one or more lines are too long
86
components/search/search.vue
Normal file
86
components/search/search.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<view :class="Fixed ? 'Fixed' : ''">
|
||||
<view :style="{ height: statusBarHeight }"></view>
|
||||
<view style="height: 44px"></view>
|
||||
<view class="search">
|
||||
<view class="search_left" :class="Fixed ? 'opacityLeft' : ''">
|
||||
<image class="search_left_img" src="/static/icon/xai.png" mode="widthFix"></image>
|
||||
<view>郑州市</view>
|
||||
</view>
|
||||
<view class="search_right p30">
|
||||
<up-input
|
||||
placeholder="查找地点、电站、充电桩编号"
|
||||
suffixIcon="/static/icon/search.png"
|
||||
border="none"
|
||||
v-model="value"
|
||||
@change="change"
|
||||
@confirm="confirm"
|
||||
></up-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
let value = ref('');
|
||||
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
||||
const emits = defineEmits(['change', 'search']);
|
||||
|
||||
const data = defineProps({
|
||||
Fixed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
let change = (e) => {
|
||||
emits('change', e);
|
||||
};
|
||||
|
||||
let confirm = (e) => {
|
||||
emits('search', e);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.Fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0 30rpx;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.search {
|
||||
@include flex($space: space-between);
|
||||
|
||||
&_left {
|
||||
@include flex;
|
||||
font-weight: bold;
|
||||
font-size: 40rpx;
|
||||
color: #232323;
|
||||
height: 86rpx;
|
||||
&_img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.opacityLeft {
|
||||
background: rgba(255, 255, 255, 0.27);
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
|
||||
&_right {
|
||||
@include flex;
|
||||
max-width: 500rpx;
|
||||
height: 86rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: inset 0rpx 0rpx 22rpx 2rpx #f9fbff;
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
33
components/statusBar/statusBar.vue
Normal file
33
components/statusBar/statusBar.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<view style="position: relative">
|
||||
<view :style="{ height: statusBarHeight }"></view>
|
||||
<view style="height: 44px;display: flex;align-items: center;">
|
||||
<slot />
|
||||
</view>
|
||||
<!-- <view class="statusBar_blur"></view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.statusBar_blur {
|
||||
width: 100%;
|
||||
height: 185rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
// background: #dbe6ff;
|
||||
background: linear-gradient( 180deg, #DBE5FF 0%, #FFFFFF 15%, #FFFFFF 81%, #F7F7F7 100%);
|
||||
opacity: 0.8;
|
||||
filter: blur(50px);
|
||||
/* #ifdef MP-ALIPAY */
|
||||
z-index: 0;
|
||||
/* #endif */
|
||||
/* #ifdef MP-WEIXIN */
|
||||
z-index: -1;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
95
components/tabbar/tabbar.vue
Normal file
95
components/tabbar/tabbar.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<view class="tabbar_pages p30">
|
||||
<view class="tabbar_pages_view" v-for="(item, index) in list" :key="index" @click="toLink(item.pagePath)">
|
||||
<view>
|
||||
<view>
|
||||
<image mode="widthFix" :src="path == item.pagePath ? item.icon : item.icon_select"></image>
|
||||
</view>
|
||||
<view :style="{ color: path == item.pagePath ? '#4874E5' : '' }">{{ item.text }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const data = defineProps({
|
||||
path: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
let list = ref([
|
||||
{
|
||||
pagePath: '/pages/index/index',
|
||||
text: '首页',
|
||||
icon_select: '/static/tabbar/home.png',
|
||||
icon: '/static/tabbar/homes.png',
|
||||
type: 0
|
||||
},
|
||||
{
|
||||
pagePath: '/pages/market/market',
|
||||
text: '公告',
|
||||
icon_select: '/static/tabbar/market.png',
|
||||
icon: '/static/tabbar/markets.png',
|
||||
type: 0
|
||||
},
|
||||
{
|
||||
pagePath: '/pages/mine/mine',
|
||||
text: '我的',
|
||||
icon_select: '/static/tabbar/mine.png',
|
||||
icon: '/static/tabbar/mines.png',
|
||||
type: 0
|
||||
}
|
||||
]);
|
||||
|
||||
const toLink = (e) => {
|
||||
uni.vibrateShort();
|
||||
if (data.path == e) return true;
|
||||
uni.switchTab({
|
||||
url: e
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.tabbar_pages {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 750rpx;
|
||||
height: 120rpx;
|
||||
@include flex($space: space-between);
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(88, 140, 255, 0.1);
|
||||
border-radius: 15rpx 15rpx 0rpx 0rpx;
|
||||
z-index: 99;
|
||||
padding: 20rpx 115rpx;
|
||||
&_view {
|
||||
width: 100%;
|
||||
view {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
@include flex($direction: column, $space: space-between);
|
||||
image {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_view:nth-child(1){
|
||||
view{
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
&_view:nth-child(3){
|
||||
view{
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user