|
|
@@ -0,0 +1,246 @@
|
|
|
+<template>
|
|
|
+ <view class="box">
|
|
|
+ <!-- 自定义导航 -->
|
|
|
+ <view class="zdyNavBox">
|
|
|
+ <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
|
|
|
+ <view class="zdyNav">
|
|
|
+ <view class="zdyNavLeft">
|
|
|
+ <image src="../../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback">
|
|
|
+ </image>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="zdyNavTitle">车型件</view>
|
|
|
+ <!-- <view class="zdyNavRight"></view> -->
|
|
|
+ <!-- <view style="width: 10rpx;"></view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
|
|
|
+ <view style="height: 44px;"></view>
|
|
|
+
|
|
|
+ <view class="top">{{title}}</view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="mainBox">
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import searchBox from '@/components/searchBox/searchBox.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ searchBox
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: '大众 > 迈腾 > 2022 > 市场一',
|
|
|
+ iStatusBarHeight: '',
|
|
|
+ cangList: [1,2,3,4,5,6,7,8],
|
|
|
+ sonTitle: '发动机',
|
|
|
+ searchValue: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ search(val) {
|
|
|
+ // console.log(val);
|
|
|
+ this.searchValue = val
|
|
|
+
|
|
|
+ },
|
|
|
+ gomodelThree() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: 'modelThree'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goOemSearch() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: 'OemSearch'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ blueBack(){
|
|
|
+ uni.navigateBack({})
|
|
|
+ },
|
|
|
+ goback() {
|
|
|
+ console.log('返回');
|
|
|
+ uni.navigateBack({})
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .box {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zdyNavBox {
|
|
|
+ width: 100vw;
|
|
|
+ background: #FFFFFF;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 9999999;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .zdyNav {
|
|
|
+ height: 44px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .backImg {
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .homeImg {
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .zdyNavLeft {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zdyNavTitle {
|
|
|
+
|
|
|
+ height: 44px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 34rpx;
|
|
|
+ line-height: 44px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zdyNavRight {
|
|
|
+ height: 44px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 44px;
|
|
|
+ color: #3F90F7;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top {
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+
|
|
|
+ background: linear-gradient(110deg, #48B9F9 0%, #3F90F7 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .mainBox {
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .maintitle {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 88rpx;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .blueBackImg {
|
|
|
+ width: 25rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .backBox {
|
|
|
+ display: flex;
|
|
|
+ position: absolute;
|
|
|
+ left: 23rpx;
|
|
|
+ top: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .backTxt {
|
|
|
+ color: #3F90F7;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 33rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mainLineJt {
|
|
|
+ width: 25rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mainLine {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+ padding: 29rpx 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lineName {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 40rpx;
|
|
|
+ width: 570rpx;
|
|
|
+ word-wrap: break-word;
|
|
|
+ /*强制换行*/
|
|
|
+ overflow: hidden;
|
|
|
+ /*超出隐藏*/
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ /*隐藏后添加省略号*/
|
|
|
+ white-space: nowrap;
|
|
|
+ /*强制不换行*/
|
|
|
+ }
|
|
|
+
|
|
|
+ .lineIMg {
|
|
|
+ width: 110rpx;
|
|
|
+ height: 110rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lineRIght {
|
|
|
+ padding-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lineBm {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .linejs {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ width: 570rpx;
|
|
|
+ word-wrap: break-word;
|
|
|
+ /*强制换行*/
|
|
|
+ overflow: hidden;
|
|
|
+ /*超出隐藏*/
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ /*隐藏后添加省略号*/
|
|
|
+ white-space: nowrap;
|
|
|
+ /*强制不换行*/
|
|
|
+ }
|
|
|
+</style>
|
guo