yangjie
/
high-mini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.修改分类的界面样式

Browse Source
yj-dev
杨杰 2 years ago
parent ab5302d11c
commit 7f395169f8
1 changed files with 441 additions and 177 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 316
      pages/tabBar/category/category.vue

316
pages/tabBar/category/category.vue
Unescape View File

@ -1,12 +1,101 @@
<template>
<view class="content">
<map style="width: 100%; height: 90vh;" :style="{height:mapheight}" :show-location='true' :latitude="latitude"
<view class="map-container">
<map style="width: 100%; height: 10vh;" :style="{height:mapheight}" :show-location='true' :latitude="latitude"
:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
<!-- <cover-view class="cover-view-loca" :style='{bottom:coverbottom}' @click="onControltap">
<cover-image class="cover-image" @click="play" src="../../../static/img/adresw.png"></cover-image>
<cover-view>
定位
</cover-view>
</cover-view> -->
<!-- 一级分类 -->
<view class="width100 cover-views mart15">
<scroll-view class="width90 cover-view-cont" scroll-x="true">
<view class="cover-view-head font14" :class="[typeid == item.id ? 'onclick' : '']"
v-for="(item,index) in marker" :key="index" @click="changeType(item)">全部全部{{index}}</view>
</scroll-view>
<!-- 二级分类 -->
<view class="width100 mart15 backcorfff cover-viewchage alijus fotct" style="border-radius: 22px;">
<view class="font14 width30w" :class="[selectFirst == 1? 'onchange' : '']"
@click="changeChilerType()">全部
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
</view>
<view class="font14 width30w" :class="[selectFirst == 1? 'onchange' : '']">全部
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
</view>
<view class="font14 width30w">
<!-- 全部
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> -->
</view>
</view>
</view>
<!-- //模态框 -->
<view class="change-cont" v-if="selectChiler == 1">
<view class="width100 backcorfff"></view>
</view>
<!-- //显示内容 -->
<view class="change-optiac paddbotm20" v-if="selectChiler == 1">
<scroll-view scroll-y="true" class="width100 height260">
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
<view class="width90w" :class="[selectFirst == 1? 'onchange' : '']">发生地方是发生地方</view>
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
</view>
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
<view class="width90w">发生地方是发生地方</view>
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
</view>
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
<view class="width90w">发生地方是发生地方</view>
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
</view>
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
<view class="width90w">发生地方是发生地方</view>
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
</view>
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
<view class="width90w">发生地方是发生地方</view>
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
</view>
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
<view class="width90w">发生地方是发生地方</view>
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
</view>
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart">
<view class="width90w">发生地方是发生地方</view>
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image>
</view>
</scroll-view>
</view>
<!-- 未打开筛选前 -->
<view class="cover-view-foot" @click="updateSelected(2)" v-if="isSelected == 1">
<view class="line-view"></view>
<view class="mart10 fcor666 font13 width100">发现更多商户</view>
<view class="input-box">
<input placeholder="搜索商品" v-model="couponName" placeholder-style="color:#c0c0c0;"
@input="toSearch()" />
</view>
</view>
<!-- 打开筛选后 -->
<view class="cover-view-foot-behind" @click="updateSelected(1)" v-if="isSelected == 2">
<view class="line-view"></view>
<view class="mart10 fcor666 font13 width100">发现更多商户</view>
<view class="input-box">
<input placeholder="搜索商品" v-model="couponName" placeholder-style="color:#c0c0c0;"
@input="toSearch()" />
</view>
<scroll-view class="scoroll-cont mart10" scroll-y="true">
<view class="height45 width100" @click.stop="updateSelected(1)">收到粉丝都是短发舒服</view>
</scroll-view>
</view>
</map>
</view>
</template>
<script>
let app = getApp();
export default {
data() {
return {
@ -14,6 +103,8 @@
longitude: 113.324587, //经度
scale: 13, //缩放级别
bottomData: false,
imagewxUrl: app.globalData.imageWxImg,
imgadres2: 'xiala.png',
marker: [{
id: 0,
latitude: 23.13065, //纬度
@ -21,14 +112,14 @@
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 20, //高
height: 30, //高
// title:'我在这里',//标注点名
alpha: 0.9, //透明度
alpha: 0.5, //透明度
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '天宝大厦', //文本
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 22, //边框圆角
borderRadius: 15, //边框圆角
borderWidth: '10',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
@ -41,9 +132,9 @@
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 20, //高
height: 30, //高
// title:'我在这里',//标注点名
alpha: 0.9, //透明度
alpha: 0.5, //透明度
// label:{//为标记点旁边增加标签 //因背景颜色H5不支持
// color:'red',//文本颜色
// },
@ -51,7 +142,7 @@
content: '广州塔', //文本
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 22, //边框圆角
borderRadius: 15, //边框圆角
borderWidth: '10',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
@ -64,13 +155,13 @@
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 20, //高
alpha: 0.9, //透明度
height: 30, //高
alpha: 0.5, //透明度
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '德隆大厦', //文本
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 22, //边框圆角
borderRadius: 15, //边框圆角
borderWidth: '10',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
@ -83,13 +174,13 @@
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 20, //高
alpha: 0.9, //透明度
height: 30, //高
alpha: 0.5, //透明度
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '羊城国际商贸中心', //文本
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 22, //边框圆角
borderRadius: 15, //边框圆角
borderWidth: '10',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
@ -102,13 +193,13 @@
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 20, //高
alpha: 0.9, //透明度
height: 30, //高
alpha: 0.5, //透明度
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '天瑞广场A座', //文本
color: '#ffffff', //文字颜色
fontSize: 16, //文本大小
borderRadius: 22, //边框圆角
borderRadius: 15, //边框圆角
borderWidth: '12',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
@ -121,19 +212,25 @@
iconPath: '../../../static/img/user/user5.png', //显示的图标
rotate: 0, // 旋转度数
width: 20, //宽
height: 20, //高
alpha: 0.9, //透明度
height: 30, //高
alpha: 0.5, //透明度
callout: { //自定义标记点上方的气泡窗口 点击有效
content: '大米和小米儿童康复(广州盈丰)中心', //文本
color: '#ffffff', //文字颜色
fontSize: 14, //文本大小
borderRadius: 22, //边框圆角
borderRadius: 15, //边框圆角
borderWidth: '8',
bgColor: '#e51860', //背景颜色
display: 'ALWAYS', //常显
},
},
],
typeid: 0, //选择分类
isSelected: 1, //是否选择下拉
selectFirst: 1, //筛选是否有值
selectChiler: 1, // 子菜单筛选
}
},
onLoad() {
@ -149,7 +246,7 @@
data = '200px'
}
} else {
data = '90vh'
data = '100vh'
}
return data
},
@ -158,20 +255,187 @@
if (this.bottomData) {
data = '20rpx'
} else {
data = '100rpx'
data = '200rpx'
}
return data
}
},
methods: {
//地图点击事件
markertap(e) {
console.log("===你点击了标记点===", e)
},
markertap(e) {},
//地图点击事件
callouttap(e) {
console.log('地图点击事件', e)
},
// 定位点击事件
onControltap() {
},
//选择类型
changeType(item) {
this.typeid = item.id;
},
//子菜单显示
changeChilerType() {
if (this.selectChiler == 1) {
this.selectChiler = 2;
} else {
this.selectChiler = 1;
}
},
// 是否选择下拉
updateSelected(item) {
this.isSelected = item;
}
}
}
</script>
<style lang='less' scoped>
.map-container {
position: relative;
overflow: hidden;
.cover-views {
position: absolute;
z-index: 99999;
}
.cover-view-cont {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
white-space: nowrap;
}
.cover-view-head {
height: 35px;
line-height: 35px;
background-color: #fff;
display: inline-table;
flex-direction: column;
text-align: center;
position: relative;
margin-right: 15px;
border-radius: 22px;
padding: 0 10px;
}
.cover-viewchage {
height: 35px;
}
.onchange {
color: #089bf5;
}
.onclick {
background-color: #089bf5;
color: #fff;
}
.cover-view-loca {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: #484848;
background-color: #fff;
background-size: 60px 60px;
background-position: center center;
position: absolute;
bottom: 100px;
right: 16px;
}
.cover-image {
display: inline-block;
width: 15px;
height: 15px;
}
.cover-view-foot {
text-align: center;
height: 200rpx;
background-color: #fff;
position: absolute;
bottom: 0px;
width: 100%;
border-radius: 18px 18px 0 0;
}
.change-cont {
position: absolute;
z-index: 99999999;
top: 100px;
background-color: #333;
width: 100%;
opacity: 0.8;
height: calc(100% - 100px);
}
.change-optiac {
position: absolute;
z-index: 99999999;
top: 100px;
width: 100%;
background-color: #fff;
height: 260px;
}
.cover-view-foot-behind {
text-align: center;
height: calc(100% - 110px);
background-color: #fff;
position: absolute;
z-index: 999999;
bottom: 0px;
width: 100%;
border-radius: 18px 18px 0 0;
}
}
.scoroll-cont {
height: calc(100% - 80px);
}
.line-view {
width: 10%;
margin-left: 45%;
height: 5px;
border-radius: 12px;
margin-top: 10px;
background-color: #f0f0f0;
}
.input-box {
width: 90%;
margin-left: 5%;
margin-top: 5px;
text-align: left;
height: 70rpx;
background-color: #f0f0f0;
border-radius: 22px;
position: relative;
align-items: center;
display: flex;
input {
padding-left: 12px;
padding-right: 12px;
height: 30px;
color: #666;
font-size: 14px;
width: 100%;
}
}
.onclick {
background-color: #089bf5;
color: #fff;
}
</style>
Write Preview
Loading…
Cancel
Save