|
|
@@ -0,0 +1,251 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <!-- 搜索 -->
|
|
|
+ <view class="search">
|
|
|
+ <u-icon name="arrow-left" size="36"></u-icon>
|
|
|
+ <view class="search-box">
|
|
|
+ <u-search placeholder="搜索设备名称或型号" :show-action="false">
|
|
|
+
|
|
|
+ </u-search>
|
|
|
+ <view class="search-btn">
|
|
|
+ <view class="text">
|
|
|
+ 搜索
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="main">
|
|
|
+ <!-- 分类 -->
|
|
|
+ <view class="classify">
|
|
|
+ <view class="item " v-for="(item,index) in menuList" @click="toggle(index)"
|
|
|
+ :class="{'checked':index ==checkindex }">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 类型 -->
|
|
|
+ <view class="type" >
|
|
|
+ <view class="type-item" v-for="item in 2">
|
|
|
+ <view class="title">
|
|
|
+ 设备类型一
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="item" v-for="item in 2">
|
|
|
+ <view class="picture">
|
|
|
+ <img src="../../../assets/img/typePic.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="infos" >
|
|
|
+ <view class="name">
|
|
|
+ 安防摄像头
|
|
|
+ </view>
|
|
|
+ <view class="model">
|
|
|
+ <view class="infos-title">
|
|
|
+ 型号：
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ DAH08410512
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="inventory">
|
|
|
+ <view class="infos-title">
|
|
|
+ 库存：
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ 10
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ checkindex: 0,
|
|
|
+ menuList: [{
|
|
|
+ name: '安全工器具'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '测量工器具'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '放线工器具'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '加工设备'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '起重设备'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '共用设备 '
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '高压试验设备'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '继电保护设备'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '生活设备'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '工程技术科'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '菜单1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '菜单2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '菜单3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '菜单4'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toggle(index) {
|
|
|
+ this.checkindex = index
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ page {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ .search {
|
|
|
+ padding: 12rpx 24rpx;
|
|
|
+ display: flex;
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .search-box {
|
|
|
+ display: flex;
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-search {
|
|
|
+ width: 530rpx;
|
|
|
+ margin: auto !important;
|
|
|
+ position: relative;
|
|
|
+ flex: 0;
|
|
|
+ margin: 0 !important;
|
|
|
+ height: 64rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-content {
|
|
|
+ width: 430px;
|
|
|
+ border-radius: 0px !important;
|
|
|
+ height: 64rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-icon--right {
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-btn {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ height: 40rpx;
|
|
|
+ margin: 12rpx 0;
|
|
|
+ border-left: 1px solid #999999;
|
|
|
+ font-family: Microsoft Yahei;
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(16, 98, 213, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ // 分类
|
|
|
+ .classify {
|
|
|
+ width: 200rpx;
|
|
|
+ height: calc(100vh - 88rpx);
|
|
|
+ background-color: #F0F0F0;
|
|
|
+ overflow-y: scroll;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ height: 120rpx;
|
|
|
+ line-height: 120rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .checked {
|
|
|
+ background-color: #fff;
|
|
|
+ color: #1062D5
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 类型
|
|
|
+ .type{
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ height: calc(100vh - 88rpx);
|
|
|
+ overflow-y: scroll;
|
|
|
+ .type-item{
|
|
|
+ margin-bottom: 80rpx;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 64rpx;
|
|
|
+ .picture{
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .infos{
|
|
|
+ margin-left: 16rpx;
|
|
|
+ .name{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ }
|
|
|
+ .model,.inventory{
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|
