|
|
<template>
|
|
|
<view class="cotainer">
|
|
|
<view class="navBarBox">
|
|
|
<image class="navBarBox-top" :src="require('@/static/home-top.png')" mode=""></image>
|
|
|
<!-- 状态栏占位 -->
|
|
|
<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
|
|
|
<image class="navBarBox-title" :style="{marginTop: navBarTop+'rpx'}"
|
|
|
:src="require('@/static/index-title.png')" mode=""></image>
|
|
|
<!-- 真正的导航栏内容 -->
|
|
|
<view class="navBar">
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="line">
|
|
|
<block v-if="listLine.length>0">
|
|
|
<view class="line-item" v-for="(item,index) in listLine"
|
|
|
:style="{'background-color':item.color,'border-radius':listLine.length===1?'50rpx':'50rpx 50rpx 0 0'}">
|
|
|
<view class="line-item-top">
|
|
|
<image class="line-item-top-icon2" :src="require('@/static/line-icon2.png')" mode=""></image>
|
|
|
<view class="line-item-top-line">
|
|
|
<image :src="item.image.url" mode=""></image>
|
|
|
<view>
|
|
|
<view class="line-item-top-line-title">{{item.name}}</view>
|
|
|
<view class="line-item-top-line-title">{{item.content}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="line-item-top-border"></view>
|
|
|
<view class="line-item-top-rleft" :style="{'background-color': item.color}"></view>
|
|
|
<view class="line-item-top-rright" :style="{'background-color': item.color}"></view>
|
|
|
</view>
|
|
|
<view class="line-item-pointer">
|
|
|
<view class="line-item-pointer-rleft" :style="{'background-color': item.color}"></view>
|
|
|
<view class="line-item-pointer-rright" :style="{'background-color': item.color}"></view>
|
|
|
<view class="line-item-pointer-right">
|
|
|
<view class="line-item-pointer-wrap" v-for="pointer in item.pointer"
|
|
|
@click="toDetail(pointer.id)">
|
|
|
<view class="line-item-pointer-wrap-dot">
|
|
|
<view></view>
|
|
|
</view>
|
|
|
<view class="line-item-pointer-item">
|
|
|
<image class="line-item-pointer-item-img" :src="pointer.image?pointer.image.url:replaceImg" mode="">
|
|
|
</image>
|
|
|
<view class="">
|
|
|
<view class="line-item-pointer-item-title">{{pointer.name}}</view>
|
|
|
<view class="line-item-pointer-item-detail">点位详情</view>
|
|
|
</view>
|
|
|
<!-- <image class="line-item-pointer-item-icon" :src="require('@/static/line-icon.png')"
|
|
|
mode=""></image> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<tabbar :currentPage="1"></tabbar>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import tabbar from '@/components/tabbar/tabbar.vue'
|
|
|
import {
|
|
|
shareInfo
|
|
|
} from '@/common/util.js'
|
|
|
export default {
|
|
|
components: {
|
|
|
tabbar
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
navBarTop: 0,
|
|
|
listLine: [],
|
|
|
colorList: ['#dbd0ba','#ad6e46','#666d95','#6d7c4c'],
|
|
|
replaceImg:require('@/static/share.jpg')
|
|
|
}
|
|
|
|
|
|
},
|
|
|
onShareAppMessage() {
|
|
|
return shareInfo
|
|
|
},
|
|
|
onShareTimeline(){
|
|
|
return shareInfo
|
|
|
},
|
|
|
onReady() {
|
|
|
|
|
|
},
|
|
|
onLoad() {
|
|
|
const MenuButton = uni.getMenuButtonBoundingClientRect()
|
|
|
this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
|
|
|
// this.getUserLocation()
|
|
|
this.getLines()
|
|
|
},
|
|
|
methods: {
|
|
|
async getLines() {
|
|
|
const res = await this.$u.api.baseFormIndex({
|
|
|
table_name: "circuits",
|
|
|
page: 1,
|
|
|
page_size: 999,
|
|
|
sort_name:'sort',
|
|
|
sort_type:'ASC'
|
|
|
// with_relations:['image']
|
|
|
})
|
|
|
|
|
|
res.data.map((item,index)=>{
|
|
|
item.color = this.colorList[index%this.colorList.length]
|
|
|
let orderMap = item.pointer_list.reduce((acc, val, idx) => {
|
|
|
acc[val] = idx;
|
|
|
return acc;
|
|
|
}, {});
|
|
|
item.pointer.sort((a, b) => {
|
|
|
// 获取a和b在arr中的索引，没有则视为最大索引+1
|
|
|
let indexA = orderMap[a.id] !== undefined ? orderMap[a.id] : item.pointer_list.length;
|
|
|
let indexB = orderMap[b.id] !== undefined ? orderMap[b.id] : item.pointer_list.length;
|
|
|
// 按照索引升序排序
|
|
|
return indexA - indexB;
|
|
|
});
|
|
|
})
|
|
|
this.listLine = res.data
|
|
|
},
|
|
|
toDetail(e) {
|
|
|
uni.navigateTo({
|
|
|
url: '/packages/detail/detail?id=' + e,
|
|
|
});
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.cotainer {
|
|
|
background: #f3efea;
|
|
|
width: 100vw;
|
|
|
// padding-bottom: 135rpx;
|
|
|
height: 100vh;
|
|
|
|
|
|
.navBarBox {
|
|
|
// height: 299rpx;
|
|
|
position: relative;
|
|
|
padding-bottom: 30rpx;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
|
|
|
&-top {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0
|
|
|
}
|
|
|
|
|
|
&-title {
|
|
|
width: 399rpx;
|
|
|
height: 102rpx;
|
|
|
margin: 0 auto;
|
|
|
position: relative;
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.navBar {
|
|
|
display: flex;
|
|
|
position: relative;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
padding: 30rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.line {
|
|
|
position: relative;
|
|
|
z-index: 99;
|
|
|
padding-bottom: 135rpx;
|
|
|
|
|
|
&-item {
|
|
|
background-color: #dbd0ba;
|
|
|
border-radius: 50rpx 50rpx 0 0;
|
|
|
padding: 50rpx 30rpx;
|
|
|
margin-top: -55rpx;
|
|
|
padding-bottom: 105rpx;
|
|
|
|
|
|
&:last-child {
|
|
|
padding-bottom: 50rpx;
|
|
|
}
|
|
|
|
|
|
&-top {
|
|
|
|
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
|
padding: 30rpx;
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
&-icon2 {
|
|
|
width: 140rpx;
|
|
|
height: 40rpx;
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
|
|
|
&-line {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
position: relative;
|
|
|
z-index: 2;
|
|
|
|
|
|
image {
|
|
|
border: 10rpx solid #ebe0d1;
|
|
|
width: 170rpx;
|
|
|
height: 170rpx;
|
|
|
border-radius: 170rpx;
|
|
|
margin-right: 20rpx;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
>view {
|
|
|
width: calc(100% - 200rpx);
|
|
|
}
|
|
|
|
|
|
&-title {
|
|
|
font-size: 32rpx;
|
|
|
color: #000;
|
|
|
margin-bottom: 15rpx;
|
|
|
}
|
|
|
|
|
|
&-dec {
|
|
|
line-height: 1.5;
|
|
|
color: #73685c;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-border {
|
|
|
position: absolute;
|
|
|
bottom: 0rpx;
|
|
|
left: 20rpx;
|
|
|
z-index: 3;
|
|
|
width: calc(100% - 40rpx);
|
|
|
height: 0px;
|
|
|
border-top: 1px dashed #ebe0d1;
|
|
|
border-bottom: 1px dashed #ebe0d1;
|
|
|
}
|
|
|
|
|
|
&-rleft {
|
|
|
position: absolute;
|
|
|
width: 20rpx;
|
|
|
height: 20rpx;
|
|
|
left: 0rpx;
|
|
|
bottom: 0;
|
|
|
background-color: #dbd0ba;
|
|
|
border-radius: 0 20rpx 0 0;
|
|
|
overflow: hidden;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
|
|
|
&-rright {
|
|
|
position: absolute;
|
|
|
width: 20rpx;
|
|
|
height: 20rpx;
|
|
|
right: 0rpx;
|
|
|
bottom: 0;
|
|
|
background-color: #dbd0ba;
|
|
|
border-radius: 20rpx 0 0 0;
|
|
|
overflow: hidden;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
&-pointer {
|
|
|
position: relative;
|
|
|
background-color: #fff;
|
|
|
border-radius: 0 0 20rpx 20rpx;
|
|
|
padding: 30rpx;
|
|
|
|
|
|
&-rleft {
|
|
|
position: absolute;
|
|
|
width: 20rpx;
|
|
|
height: 20rpx;
|
|
|
left: 0rpx;
|
|
|
top: 0;
|
|
|
background-color: #dbd0ba;
|
|
|
border-radius: 0 0 20rpx 0;
|
|
|
overflow: hidden;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
|
|
|
&-rright {
|
|
|
position: absolute;
|
|
|
width: 20rpx;
|
|
|
height: 20rpx;
|
|
|
right: 0rpx;
|
|
|
top: 0;
|
|
|
background-color: #dbd0ba;
|
|
|
border-radius: 0 0 0 20rpx;
|
|
|
overflow: hidden;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
|
|
|
&-wrap {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
&-dot {
|
|
|
text-align: center;
|
|
|
width: 10%;
|
|
|
height: 210rpx;
|
|
|
line-height: 180rpx;
|
|
|
position: relative;
|
|
|
|
|
|
&::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -8rpx);
|
|
|
width: 1px;
|
|
|
height: 210rpx;
|
|
|
border-left: 1px dashed #bebdbc;
|
|
|
}
|
|
|
|
|
|
>view {
|
|
|
width: 16rpx;
|
|
|
height: 16rpx;
|
|
|
border-radius: 16rpx;
|
|
|
background-color: #960909;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
&:last-child {
|
|
|
.line-item-pointer-wrap-dot {
|
|
|
&::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -8rpx);
|
|
|
width: 1px;
|
|
|
height: 0;
|
|
|
border-left: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
&-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 20rpx;
|
|
|
background-color: #fff;
|
|
|
border-radius: 20rpx;
|
|
|
box-shadow: -2px -3rpx 12px rgba(0, 0, 0, 0.1);
|
|
|
margin-bottom: 30rpx;
|
|
|
width: 90%;
|
|
|
height: 180rpx;
|
|
|
|
|
|
&-img {
|
|
|
width: 165rpx;
|
|
|
height: 90rpx;
|
|
|
border-radius: 20rpx;
|
|
|
margin-right: 30rpx;
|
|
|
}
|
|
|
|
|
|
>view {
|
|
|
width: calc(100% - 200rpx)
|
|
|
}
|
|
|
|
|
|
&-title {
|
|
|
font-size: 32rpx;
|
|
|
color: #000;
|
|
|
}
|
|
|
|
|
|
&-detail {
|
|
|
color: #bc9766;
|
|
|
}
|
|
|
|
|
|
|
|
|
&-icon {
|
|
|
width: 73rpx;
|
|
|
height: 73rpx;
|
|
|
position: absolute;
|
|
|
right: 30rpx;
|
|
|
bottom: 60rpx;
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</style> |
