添加选择城市页面
This commit is contained in:
92
src/pages/city/city.vue
Normal file
92
src/pages/city/city.vue
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
<!-- 使用 type="home" 属性设置首页,其他页面不需要设置,默认为page -->
|
||||||
|
<route lang="jsonc" type="page">{
|
||||||
|
"layout": "tabbar",
|
||||||
|
"style": {
|
||||||
|
// 'custom' 表示开启自定义导航栏,默认 'default'
|
||||||
|
"navigationStyle": "default",
|
||||||
|
"navigationBarTitleText": "选择城市"
|
||||||
|
}
|
||||||
|
}</route>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="">
|
||||||
|
<view class="search-box mx-30rpx mt-30rpx">
|
||||||
|
<wd-search placeholder="请输入城市名称" :placeholder-left="true" placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;"></wd-search>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="mt-52rpx mx-30rpx">
|
||||||
|
<view class="text-[#333] leading-42rpx text-30rpx font-bold">当前定位</view>
|
||||||
|
<view class="mt-40rpx">
|
||||||
|
<view class="bg-[#F8F9FA] rounded-28rpx w-162rpx h-56rpx text-[#606266] flex items-center justify-center">
|
||||||
|
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location2.png`"></wd-img>
|
||||||
|
<view class="text-26rpx text-[#606266] leading-36rpx">上海市</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="mt-50rpx mx-30rpx">
|
||||||
|
<view class="text-[#333] leading-42rpx text-30rpx font-bold">已开通城市</view>
|
||||||
|
<view class="mt-40rpx grid grid-cols-4 gap-20rpx w-full">
|
||||||
|
<view class="bg-[#F8F9FA] rounded-28rpx h-56rpx text-[#606266] flex items-center justify-center" v-for="(item, index) in 9" :key="index">
|
||||||
|
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location2.png`"></wd-img>
|
||||||
|
<view class="text-26rpx text-[#606266] leading-36rpx">上海市</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, inject } from 'vue'
|
||||||
|
|
||||||
|
let OSS = inject('OSS')
|
||||||
|
|
||||||
|
onLoad(() => {
|
||||||
|
})
|
||||||
|
|
||||||
|
const city = {
|
||||||
|
back: () => {
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
margin-right: 32px;
|
||||||
|
--wot-search-padding: 0;
|
||||||
|
--wot-search-side-padding: 0;
|
||||||
|
|
||||||
|
:deep() {
|
||||||
|
.wd-search {
|
||||||
|
background: transparent !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wd-search__block {
|
||||||
|
height: 72rpx;
|
||||||
|
background-color: #F8F9FA !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wd-search__input {
|
||||||
|
// #ifdef MP
|
||||||
|
padding-left: 32px !important;
|
||||||
|
padding-right: 32px !important;
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef MP
|
||||||
|
padding-right: 0 !important;
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user