|
@@ -0,0 +1,213 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="top">
|
|
|
+ <view class="topCont">
|
|
|
+ <view class="carBox">
|
|
|
+ <image src="../../static/img/nocar.png" mode="" class="carLogo"></image>
|
|
|
+ <view class="carTxt">华晨宝马iX3 G08 电动 HA001N0电动领先型 ( 改款 )(2021-2021)过长换行</view>
|
|
|
+ <image src="../../static/img/jt.png" mode="" class="carJt"></image>
|
|
|
+ </view>
|
|
|
+ <view class="vinBox">
|
|
|
+ <view class="vinB">VIN</view>
|
|
|
+ <view class="vinNum">HNUJN8888999H9098</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mainBox">
|
|
|
+ <view class="maintitle">总组
|
|
|
+ <view class="backBox">
|
|
|
+ <image src="../../static/img/icon_arrow_blue_l@2x.png" mode="" class="backImg"></image>
|
|
|
+ <view class="backTxt">返回总组</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="searchBox">
|
|
|
+ <view class="inputBox">
|
|
|
+ <img src="../../static/img/icon_search.png" alt="" class="searchImg">
|
|
|
+ <input type="text" placeholder="快速查找子组" class="topInput">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="mainLine" v-for="(item,index) in 5" @click="goThree">
|
|
|
+ <view class="lineLeft">
|
|
|
+ <image class="lineIMg" src="http://dmsimg.66km.com/thFiles/7C057545-E11E-40F5-AD3C-637EF653B417.jpg" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
+ <view class="lineRIght">
|
|
|
+ <view class="lineName">电气设备,排气和加热</view>
|
|
|
+ <view class="lineBm">UH908980</view>
|
|
|
+ <view class="linejs">这是备注,没有就不显示该行,长了有就不显示该有就不显示该长了有就不显示该</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: 'Hello'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goThree(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'modelThree'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .searchImg{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ .searchBox{
|
|
|
+ padding-top:24rpx ;
|
|
|
+ }
|
|
|
+ .inputBox{
|
|
|
+ width: 702rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ background: #F4F5F7;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ display:flex;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .topInput{
|
|
|
+ font-size: 28rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ line-height: 72rpx;
|
|
|
+ padding-left: 16rpx;
|
|
|
+ width: 500rpx;
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ background: #F4F5F7;
|
|
|
+ min-height: 100vh;
|
|
|
+ }
|
|
|
+ .top{
|
|
|
+ padding: 20rpx 0;
|
|
|
+ }
|
|
|
+ .topCont{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 185rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+ .carLogo{
|
|
|
+ width: 72rpx;height: 72rpx;
|
|
|
+ }
|
|
|
+ .carTxt{
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 36rpx;
|
|
|
+ width: 560rpx;
|
|
|
+ }
|
|
|
+ .carJt{
|
|
|
+ width: 25rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ margin-top: 6rpx;
|
|
|
+ }
|
|
|
+ .carBox{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 30rpx 24rpx 24rpx 24rpx;
|
|
|
+ }
|
|
|
+ .vinBox{
|
|
|
+ display: flex;
|
|
|
+ padding-left: 120rpx;
|
|
|
+ }
|
|
|
+ .vinB{
|
|
|
+ background: #F19D01;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 22rpx;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ }
|
|
|
+ .vinNum{
|
|
|
+ color: #999999;font-size: 24rpx;line-height: 30rpx;padding-left: 10rpx;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .backImg{
|
|
|
+ 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>
|