dev
zx
3 years ago
parent
9f99672df8
commit
bfd5af76b4
|
After Width: | Height: | Size: 76 KiB |
@ -0,0 +1,53 @@
|
||||
Page({
|
||||
data: {
|
||||
recommandBrand: [
|
||||
{
|
||||
img: "./cars/audi.jpg",
|
||||
title: "奥迪"
|
||||
},
|
||||
{
|
||||
img: "./cars/audi.jpg",
|
||||
title: "奥迪"
|
||||
},
|
||||
{
|
||||
img: "./cars/audi.jpg",
|
||||
title: "奥迪"
|
||||
},
|
||||
{
|
||||
img: "./cars/audi.jpg",
|
||||
title: "奥迪"
|
||||
},
|
||||
{
|
||||
img: "./cars/audi.jpg",
|
||||
title: "奥迪"
|
||||
},
|
||||
{
|
||||
img: "./cars/audi.jpg",
|
||||
title: "奥迪"
|
||||
},
|
||||
{
|
||||
img: "./cars/audi.jpg",
|
||||
title: "奥迪"
|
||||
}
|
||||
],
|
||||
popShow: false
|
||||
},
|
||||
onShow() {
|
||||
this.getTabBar().init();
|
||||
},
|
||||
onClose() {
|
||||
this.setData({
|
||||
popShow: false
|
||||
})
|
||||
},
|
||||
modalChoose() {
|
||||
this.setData({
|
||||
popShow: true
|
||||
})
|
||||
},
|
||||
toModalInsight() {
|
||||
wx.navigateTo({
|
||||
url: "/pages/insight/pages/modalInsight/index"
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,103 @@
|
||||
<view>
|
||||
<view style="height: 40px;"></view>
|
||||
<van-search style="width: 100%;" background="#006BFF" value="{{ brandForm.brand }}" placeholder="请输入车型名称" />
|
||||
<view class="bs-tabs">
|
||||
<scroll-view class="bs-tab-sv" scroll-x="true">
|
||||
<view class="bs-tab-sv-item" wx:for="{{recommandBrand}}" wx:key="index">
|
||||
<image class="userAvatar" src="{{item.img}}" />
|
||||
<view class="bs-tab-title">{{item.title}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<van-index-bar class="bs-bar" sticky-offset-top="40">
|
||||
<view>
|
||||
<van-index-anchor index="A" />
|
||||
<van-cell clickable bind:click="modalChoose">
|
||||
<view slot="title" class="cell-item">
|
||||
<image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
|
||||
<text>奥迪</text>
|
||||
</view>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<view slot="title" class="cell-item">
|
||||
<image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
|
||||
<text>奥迪</text>
|
||||
</view>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<view slot="title" class="cell-item">
|
||||
<image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
|
||||
<text>奥迪</text>
|
||||
</view>
|
||||
</van-cell>
|
||||
</view>
|
||||
<view>
|
||||
<van-index-anchor index="B" />
|
||||
<van-cell>
|
||||
<view slot="title" class="cell-item">
|
||||
<image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
|
||||
<text>奥迪</text>
|
||||
</view>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<view slot="title" class="cell-item">
|
||||
<image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
|
||||
<text>奥迪</text>
|
||||
</view>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<view slot="title" class="cell-item">
|
||||
<image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
|
||||
<text>奥迪</text>
|
||||
</view>
|
||||
</van-cell>
|
||||
</view>
|
||||
<view>
|
||||
<van-index-anchor index="C" />
|
||||
<van-cell>
|
||||
<view slot="title" class="cell-item">
|
||||
<image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
|
||||
<text>奥迪</text>
|
||||
</view>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<view slot="title" class="cell-item">
|
||||
<image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
|
||||
<text>奥迪</text>
|
||||
</view>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<view slot="title" class="cell-item">
|
||||
<image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
|
||||
<text>奥迪</text>
|
||||
</view>
|
||||
</van-cell>
|
||||
</view>
|
||||
<view>
|
||||
<van-index-anchor index="D" />
|
||||
<van-cell>
|
||||
<view slot="title" class="cell-item">
|
||||
<image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
|
||||
<text>奥迪</text>
|
||||
</view>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<view slot="title" class="cell-item">
|
||||
<image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
|
||||
<text>奥迪</text>
|
||||
</view>
|
||||
</van-cell>
|
||||
<van-cell>
|
||||
<view slot="title" class="cell-item">
|
||||
<image slot="icon" class="bs-item-image" src="./cars/audi.jpg" />
|
||||
<text>奥迪</text>
|
||||
</view>
|
||||
</van-cell>
|
||||
</view>
|
||||
</van-index-bar>
|
||||
<van-popup show="{{popShow}}" custom-style="height: 88%;width: 65%;padding-bottom: 80rpx" position="right" bind:close="onClose">
|
||||
<van-cell label="宝马"></van-cell>
|
||||
<van-cell clickable bind:click="toModalInsight" title="宝马1系"></van-cell>
|
||||
<van-cell title="宝马3系"></van-cell>
|
||||
</van-popup>
|
||||
</view>
|
||||
@ -0,0 +1,116 @@
|
||||
.view-page {
|
||||
width: 100%;
|
||||
color: #333333;
|
||||
background: #fff;
|
||||
}
|
||||
.bs-top-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.nav-top {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 5000;
|
||||
}
|
||||
.bs-top {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
height: 67px;
|
||||
align-items: center;
|
||||
background: #006BFF;
|
||||
padding-left: 13rpx;
|
||||
padding-right: 13rpx;
|
||||
padding-top: 5px;
|
||||
}
|
||||
.bs-item {
|
||||
display: flex;
|
||||
justify-items: flex-start;
|
||||
background: #fff;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cell-item {
|
||||
display: flex;
|
||||
justify-items: flex-start;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.bs-item-image {
|
||||
display: inline-block;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.bs-block {
|
||||
position: relative;
|
||||
height: 207px;
|
||||
}
|
||||
.bs-bar {
|
||||
position: relative;
|
||||
}
|
||||
.bs-bar .van-index-anchor-wrapper {
|
||||
background: #F9F9F9;
|
||||
}
|
||||
.bs-bar .van-index-bar__sidebar {
|
||||
top: 63%;
|
||||
}
|
||||
.menu-tabs .van-tabs__nav{
|
||||
background-color: #006BFF;/* 标签背景颜色 */
|
||||
}
|
||||
.menu-tabs .van-tab {
|
||||
color: #98CDFF; /* 字体颜色 */
|
||||
background-color: #006BFF;/* 标签背景颜色 */
|
||||
}
|
||||
|
||||
.menu-tabs .van-tab--active{
|
||||
color: #FFFFFF; /* 字体颜色 */
|
||||
font-size: 17px;
|
||||
}
|
||||
.menu-tabs .van-tabs__line {
|
||||
background: transparent;
|
||||
}
|
||||
.a {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/*横向列表项*/
|
||||
.bs-tabs {
|
||||
width: 100%;
|
||||
margin-top: 0px;
|
||||
height: 120rpx;
|
||||
background: #fff;
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
padding-top: 30rpx;
|
||||
box-shadow: 0 -2px 3px -1px rgba(0,0,0,0.2);
|
||||
|
||||
}
|
||||
.bs-tab-sv {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
}
|
||||
.bs-tab-sv-item {
|
||||
width: 20%;
|
||||
height: 100rpx;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
.userAvatar{
|
||||
width: 68rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.bs-tab-title{
|
||||
font-size: 27rpx;
|
||||
}
|
||||
|
||||
|
After Width: | Height: | Size: 76 KiB |
@ -1,5 +1,8 @@
|
||||
Page({
|
||||
data: {
|
||||
|
||||
|
||||
},
|
||||
toDataList() {
|
||||
console.log('test')
|
||||
}
|
||||
})
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
|
||||
"time-component":"/components/timecomponent/index"
|
||||
},
|
||||
"navigationBarTitleText": "品牌洞察"
|
||||
}
|
||||
@ -1,5 +1,51 @@
|
||||
<view>
|
||||
<view>
|
||||
brandInsight
|
||||
<view class="top-brand-switch">
|
||||
<time-component></time-component>
|
||||
<view class="switch-container">
|
||||
<van-row>
|
||||
<van-col class="tab-btn" span="8"><van-icon name="exchange" /> 切换品牌</van-col>
|
||||
<van-col bindtap="toDataList" class="tab-btn" span="8"><van-icon name="description" /> 数据列表</van-col>
|
||||
<van-col class="tab-btn" span="8"><van-icon name="back-top" /> 生成报告</van-col>
|
||||
</van-row>
|
||||
<van-divider custom-style="background: linear-gradient(117deg, rgba(245,245,245,0) 0%, #EEEEEE 50%, rgba(232,232,232,0) 100%);" hairline />
|
||||
<view class="switch-middle">
|
||||
<van-image round src=""></van-image>
|
||||
<view class="brand-number">
|
||||
<view>一汽大众汽车</view>
|
||||
<view>99.3w <text style="font-size: 13px;font-weight: 400;color: rgba(255,255,255,0.6000);">数据总量</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<van-divider custom-style="background: linear-gradient(117deg, rgba(245,245,245,0) 0%, #EEEEEE 50%, rgba(232,232,232,0) 100%);" hairline />
|
||||
<van-row>
|
||||
<van-col class="tab-btn" span="8">
|
||||
<text style="font-size: 12px;font-weight: 400;color: rgba(255,255,255,0.6000);">正面调性</text><text class="brand-number">60%</text>
|
||||
</van-col>
|
||||
<van-col class="tab-btn" span="8">
|
||||
<text style="font-size: 12px;font-weight: 400;color: rgba(255,255,255,0.6000);">正面调性</text><text class="brand-number"> 60%</text>
|
||||
</van-col>
|
||||
<van-col class="tab-btn" span="8">
|
||||
<text style="font-size: 12px;font-weight: 400;color: rgba(255,255,255,0.6000);">正面调性</text><text class="brand-number"> 60%</text>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-view">
|
||||
<van-tabs class="view-tabs" swipe-threshold="3">
|
||||
<van-tab title="概括">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
<van-tab title="微博洞察">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
<van-tab title="论坛洞察">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
<van-tab title="尾翼洞察">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
<van-tab title="事件洞察">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,57 @@
|
||||
.top-tabs {
|
||||
height: 67px;
|
||||
align-items: center;
|
||||
background: #006BFF;
|
||||
padding-left: 13rpx;
|
||||
padding-right: 13rpx;
|
||||
padding-top: 1px;
|
||||
}
|
||||
.top-brand-switch {
|
||||
background: #006BFF;
|
||||
padding: 2rpx 32rpx 32rpx 32rpx
|
||||
}
|
||||
.switch-container {
|
||||
height: 330rpx;
|
||||
background: rgb(77, 159, 253);
|
||||
padding: 24rpx 0rpx 24rpx 0rpx;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
margin-top: 32rpx;
|
||||
border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)) 1 1;
|
||||
}
|
||||
.tab-btn {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF
|
||||
}
|
||||
.switch-middle {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.brand-number {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
/* 图表 */
|
||||
.bottom-view {
|
||||
background: #FFF;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
}
|
||||
/* tabs */
|
||||
.view-tabs .van-tabs__nav{
|
||||
background-color: #006BFF;/* 标签背景颜色 */
|
||||
}
|
||||
.view-tabs .van-tab {
|
||||
color: #999999; /* 字体颜色 */
|
||||
background-color: #F9F9F9;/* 标签背景颜色 */
|
||||
}
|
||||
|
||||
.view-tabs .van-tab--active{
|
||||
color: #0084FF; /* 字体颜色 */
|
||||
font-size: 19px;
|
||||
}
|
||||
.view-tabs .van-tabs__line {
|
||||
background: transparent;
|
||||
}
|
||||
|
After Width: | Height: | Size: 76 KiB |
@ -1,5 +1,8 @@
|
||||
Page({
|
||||
data: {
|
||||
|
||||
|
||||
},
|
||||
toDataList() {
|
||||
console.log('test')
|
||||
}
|
||||
})
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
|
||||
"time-component":"/components/timecomponent/index"
|
||||
},
|
||||
"navigationBarTitleText": "事件洞察"
|
||||
"navigationBarTitleText": "事件详情"
|
||||
}
|
||||
@ -1,5 +1,51 @@
|
||||
<view>
|
||||
<view>
|
||||
eventInsight
|
||||
<view class="top-brand-switch">
|
||||
<time-component></time-component>
|
||||
<view class="switch-container">
|
||||
<van-row>
|
||||
<van-col class="tab-btn" span="8"><van-icon name="exchange" /> 切换品牌</van-col>
|
||||
<van-col bindtap="toDataList" class="tab-btn" span="8"><van-icon name="description" /> 数据列表</van-col>
|
||||
<van-col class="tab-btn" span="8"><van-icon name="back-top" /> 生成报告</van-col>
|
||||
</van-row>
|
||||
<van-divider custom-style="background: linear-gradient(117deg, rgba(245,245,245,0) 0%, #EEEEEE 50%, rgba(232,232,232,0) 100%);" hairline />
|
||||
<view class="switch-middle">
|
||||
<van-image round src=""></van-image>
|
||||
<view class="brand-number">
|
||||
<view>一汽大众汽车</view>
|
||||
<view>99.3w <text style="font-size: 13px;font-weight: 400;color: rgba(255,255,255,0.6000);">数据总量</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<van-divider custom-style="background: linear-gradient(117deg, rgba(245,245,245,0) 0%, #EEEEEE 50%, rgba(232,232,232,0) 100%);" hairline />
|
||||
<van-row>
|
||||
<van-col class="tab-btn" span="8">
|
||||
<text style="font-size: 12px;font-weight: 400;color: rgba(255,255,255,0.6000);">正面调性</text><text class="brand-number">60%</text>
|
||||
</van-col>
|
||||
<van-col class="tab-btn" span="8">
|
||||
<text style="font-size: 12px;font-weight: 400;color: rgba(255,255,255,0.6000);">正面调性</text><text class="brand-number"> 60%</text>
|
||||
</van-col>
|
||||
<van-col class="tab-btn" span="8">
|
||||
<text style="font-size: 12px;font-weight: 400;color: rgba(255,255,255,0.6000);">正面调性</text><text class="brand-number"> 60%</text>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-view">
|
||||
<van-tabs class="view-tabs" swipe-threshold="3">
|
||||
<van-tab title="概括">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
<van-tab title="微博洞察">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
<van-tab title="论坛洞察">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
<van-tab title="尾翼洞察">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
<van-tab title="事件洞察">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,57 @@
|
||||
.top-tabs {
|
||||
height: 67px;
|
||||
align-items: center;
|
||||
background: #006BFF;
|
||||
padding-left: 13rpx;
|
||||
padding-right: 13rpx;
|
||||
padding-top: 1px;
|
||||
}
|
||||
.top-brand-switch {
|
||||
background: #006BFF;
|
||||
padding: 2rpx 32rpx 32rpx 32rpx
|
||||
}
|
||||
.switch-container {
|
||||
height: 330rpx;
|
||||
background: rgb(77, 159, 253);
|
||||
padding: 24rpx 0rpx 24rpx 0rpx;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
margin-top: 32rpx;
|
||||
border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)) 1 1;
|
||||
}
|
||||
.tab-btn {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF
|
||||
}
|
||||
.switch-middle {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.brand-number {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
/* 图表 */
|
||||
.bottom-view {
|
||||
background: #FFF;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
}
|
||||
/* tabs */
|
||||
.view-tabs .van-tabs__nav{
|
||||
background-color: #006BFF;/* 标签背景颜色 */
|
||||
}
|
||||
.view-tabs .van-tab {
|
||||
color: #999999; /* 字体颜色 */
|
||||
background-color: #F9F9F9;/* 标签背景颜色 */
|
||||
}
|
||||
|
||||
.view-tabs .van-tab--active{
|
||||
color: #0084FF; /* 字体颜色 */
|
||||
font-size: 19px;
|
||||
}
|
||||
.view-tabs .van-tabs__line {
|
||||
background: transparent;
|
||||
}
|
||||
|
After Width: | Height: | Size: 76 KiB |
@ -1,5 +1,8 @@
|
||||
Page({
|
||||
data: {
|
||||
|
||||
|
||||
},
|
||||
toDataList() {
|
||||
console.log('test')
|
||||
}
|
||||
})
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
|
||||
"time-component":"/components/timecomponent/index"
|
||||
},
|
||||
"navigationBarTitleText": "车型洞察"
|
||||
}
|
||||
@ -1,5 +1,56 @@
|
||||
<view>
|
||||
<view>
|
||||
modalInsight
|
||||
<view class="top-brand-switch">
|
||||
<time-component></time-component>
|
||||
<view class="switch-container">
|
||||
<van-row>
|
||||
<van-col class="tab-btn" span="8"><van-icon name="exchange" /> 切换车型</van-col>
|
||||
<van-col bindtap="toDataList" class="tab-btn" span="8"><van-icon name="description" /> 数据列表</van-col>
|
||||
<van-col class="tab-btn" span="8"><van-icon name="back-top" /> 生成报告</van-col>
|
||||
</van-row>
|
||||
<van-divider custom-style="background: linear-gradient(117deg, rgba(245,245,245,0) 0%, #EEEEEE 50%, rgba(232,232,232,0) 100%);" hairline />
|
||||
<view class="switch-middle">
|
||||
<van-image round src=""></van-image>
|
||||
<view class="brand-number">
|
||||
<view>帕萨特</view>
|
||||
<view>
|
||||
<text>99.3w</text>
|
||||
<text style="font-size: 13px;font-weight: 400;color: rgba(255,255,255,0.6000);"> 数据总量</text>
|
||||
<text style="margin-left: 24rpx;">3.41%</text>
|
||||
<text style="font-size: 13px;font-weight: 400;color: rgba(255,255,255,0.6000);"> 品牌占比</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<van-divider custom-style="background: linear-gradient(117deg, rgba(245,245,245,0) 0%, #EEEEEE 50%, rgba(232,232,232,0) 100%);" hairline />
|
||||
<van-row>
|
||||
<van-col class="tab-btn" span="8">
|
||||
<text style="font-size: 12px;font-weight: 400;color: rgba(255,255,255,0.6000);">正面调性</text><text class="brand-number">60%</text>
|
||||
</van-col>
|
||||
<van-col class="tab-btn" span="8">
|
||||
<text style="font-size: 12px;font-weight: 400;color: rgba(255,255,255,0.6000);">正面调性</text><text class="brand-number"> 60%</text>
|
||||
</van-col>
|
||||
<van-col class="tab-btn" span="8">
|
||||
<text style="font-size: 12px;font-weight: 400;color: rgba(255,255,255,0.6000);">正面调性</text><text class="brand-number"> 60%</text>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-view">
|
||||
<van-tabs class="view-tabs" swipe-threshold="3">
|
||||
<van-tab title="概括">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
<van-tab title="微博洞察">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
<van-tab title="论坛洞察">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
<van-tab title="尾翼洞察">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
<van-tab title="事件洞察">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,57 @@
|
||||
.top-tabs {
|
||||
height: 67px;
|
||||
align-items: center;
|
||||
background: #006BFF;
|
||||
padding-left: 13rpx;
|
||||
padding-right: 13rpx;
|
||||
padding-top: 1px;
|
||||
}
|
||||
.top-brand-switch {
|
||||
background: #006BFF;
|
||||
padding: 2rpx 32rpx 32rpx 32rpx
|
||||
}
|
||||
.switch-container {
|
||||
height: 330rpx;
|
||||
background: rgb(77, 159, 253);
|
||||
padding: 24rpx 0rpx 24rpx 0rpx;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
margin-top: 32rpx;
|
||||
border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)) 1 1;
|
||||
}
|
||||
.tab-btn {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF
|
||||
}
|
||||
.switch-middle {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.brand-number {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
/* 图表 */
|
||||
.bottom-view {
|
||||
background: #FFF;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
}
|
||||
/* tabs */
|
||||
.view-tabs .van-tabs__nav{
|
||||
background-color: #006BFF;/* 标签背景颜色 */
|
||||
}
|
||||
.view-tabs .van-tab {
|
||||
color: #999999; /* 字体颜色 */
|
||||
background-color: #F9F9F9;/* 标签背景颜色 */
|
||||
}
|
||||
|
||||
.view-tabs .van-tab--active{
|
||||
color: #0084FF; /* 字体颜色 */
|
||||
font-size: 19px;
|
||||
}
|
||||
.view-tabs .van-tabs__line {
|
||||
background: transparent;
|
||||
}
|
||||
|
After Width: | Height: | Size: 76 KiB |
@ -1,5 +1,8 @@
|
||||
Page({
|
||||
data: {
|
||||
|
||||
|
||||
},
|
||||
toDataList() {
|
||||
console.log('test')
|
||||
}
|
||||
})
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
|
||||
"time-component":"/components/timecomponent/index"
|
||||
},
|
||||
"navigationBarTitleText": "主题分析"
|
||||
"navigationBarTitleText": "主题详情"
|
||||
}
|
||||
@ -1,5 +1,51 @@
|
||||
<view>
|
||||
<view>
|
||||
themeAnalize
|
||||
<view class="top-brand-switch">
|
||||
<time-component></time-component>
|
||||
<view class="switch-container">
|
||||
<van-row>
|
||||
<van-col class="tab-btn" span="8"><van-icon name="exchange" /> 切换品牌</van-col>
|
||||
<van-col bindtap="toDataList" class="tab-btn" span="8"><van-icon name="description" /> 数据列表</van-col>
|
||||
<van-col class="tab-btn" span="8"><van-icon name="back-top" /> 生成报告</van-col>
|
||||
</van-row>
|
||||
<van-divider custom-style="background: linear-gradient(117deg, rgba(245,245,245,0) 0%, #EEEEEE 50%, rgba(232,232,232,0) 100%);" hairline />
|
||||
<view class="switch-middle">
|
||||
<van-image round src=""></van-image>
|
||||
<view class="brand-number">
|
||||
<view>一汽大众汽车</view>
|
||||
<view>99.3w <text style="font-size: 13px;font-weight: 400;color: rgba(255,255,255,0.6000);">数据总量</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<van-divider custom-style="background: linear-gradient(117deg, rgba(245,245,245,0) 0%, #EEEEEE 50%, rgba(232,232,232,0) 100%);" hairline />
|
||||
<van-row>
|
||||
<van-col class="tab-btn" span="8">
|
||||
<text style="font-size: 12px;font-weight: 400;color: rgba(255,255,255,0.6000);">正面调性</text><text class="brand-number">60%</text>
|
||||
</van-col>
|
||||
<van-col class="tab-btn" span="8">
|
||||
<text style="font-size: 12px;font-weight: 400;color: rgba(255,255,255,0.6000);">正面调性</text><text class="brand-number"> 60%</text>
|
||||
</van-col>
|
||||
<van-col class="tab-btn" span="8">
|
||||
<text style="font-size: 12px;font-weight: 400;color: rgba(255,255,255,0.6000);">正面调性</text><text class="brand-number"> 60%</text>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom-view">
|
||||
<van-tabs class="view-tabs" swipe-threshold="3">
|
||||
<van-tab title="概括">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
<van-tab title="微博洞察">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
<van-tab title="论坛洞察">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
<van-tab title="尾翼洞察">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
<van-tab title="事件洞察">
|
||||
<view>test</view>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,57 @@
|
||||
.top-tabs {
|
||||
height: 67px;
|
||||
align-items: center;
|
||||
background: #006BFF;
|
||||
padding-left: 13rpx;
|
||||
padding-right: 13rpx;
|
||||
padding-top: 1px;
|
||||
}
|
||||
.top-brand-switch {
|
||||
background: #006BFF;
|
||||
padding: 2rpx 32rpx 32rpx 32rpx
|
||||
}
|
||||
.switch-container {
|
||||
height: 330rpx;
|
||||
background: rgb(77, 159, 253);
|
||||
padding: 24rpx 0rpx 24rpx 0rpx;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
margin-top: 32rpx;
|
||||
border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)) 1 1;
|
||||
}
|
||||
.tab-btn {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF
|
||||
}
|
||||
.switch-middle {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.brand-number {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
/* 图表 */
|
||||
.bottom-view {
|
||||
background: #FFF;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
}
|
||||
/* tabs */
|
||||
.view-tabs .van-tabs__nav{
|
||||
background-color: #006BFF;/* 标签背景颜色 */
|
||||
}
|
||||
.view-tabs .van-tab {
|
||||
color: #999999; /* 字体颜色 */
|
||||
background-color: #F9F9F9;/* 标签背景颜色 */
|
||||
}
|
||||
|
||||
.view-tabs .van-tab--active{
|
||||
color: #0084FF; /* 字体颜色 */
|
||||
font-size: 19px;
|
||||
}
|
||||
.view-tabs .van-tabs__line {
|
||||
background: transparent;
|
||||
}
|
||||
@ -1,4 +1,8 @@
|
||||
<view class="content">
|
||||
<view style="height: 40px;"></view>
|
||||
<view>
|
||||
<view style="height: 40px;"></view>
|
||||
<eventChild></eventChild>
|
||||
</view>
|
||||
<view class="theme-add">
|
||||
<van-button color="#0084FF" plain icon="plus" block class="theme-add-btn">新增主题</van-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
.btn {
|
||||
margin-top: 32rpx;
|
||||
width: 686rpx;
|
||||
height: 88rpx;
|
||||
.theme-add-btn {
|
||||
font-weight: bold;
|
||||
line-height: 88rpx;
|
||||
color: rgba(0, 132, 255, 1);
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.theme-add {
|
||||
padding: 12px;
|
||||
background-color: #006BFF;
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue