瀏覽代碼

bug修改

喻文俊 3 年之前
父節點
當前提交
92a7375e16

+ 3 - 3
.env.development

@@ -3,8 +3,8 @@ EVN = 'development'
 
 # 网站地址
 # LOCALHOSE = 'https://zp-b.caimei365.com'
-# LOCALHOSE = 'http://192.168.2.81:3000'
-LOCALHOSE = 'http://192.168.1.102:8888'
+LOCALHOSE = 'http://192.168.2.81:8888'
+# LOCALHOSE = 'http://192.168.1.102:8888'
 
 # 接口api地址
 BASE_URL = 'https://zplma-b.caimei365.com'
@@ -17,7 +17,7 @@ STATIC_URL = 'https://static.caimei365.com/www/authentic'
 CIMEI_LOCAL = 'https://www-b.caimei365.com'
 
 # 项目运行地址
-HOST = '192.168.1.102'
+HOST = '192.168.2.81'
 
 # 项目端口号
 PORT = '8888'

+ 1 - 1
.env.production

@@ -14,7 +14,7 @@ STATIC_URL = 'https://static.caimei365.com/www/authentic'
 CIMEI_LOCAL = 'https://www.caimei365.com'
 
 # 项目运行地址
-HOST = '172.31.165.28'
+HOST = '172.31.165.23'
 
 # 项目端口号
 PORT = '8105'

二進制
caimei-authentic-www.rar


+ 11 - 0
components/LdmLogin/index.vue

@@ -75,6 +75,14 @@ export default {
         this.$setStorage(this.routePrefix, 'userInfo', res.data)
         // 关闭登录窗口
         this.onClose()
+        // 重定向
+        const login_redicret = this.$getStorage(
+          this.routePrefix,
+          'login_redicret'
+        )
+        if (login_redicret) {
+          this.$router.push(login_redicret)
+        }
       } catch (error) {
         console.log(error)
       }
@@ -82,6 +90,9 @@ export default {
     // 关闭登录窗口
     onClose() {
       this.$store.commit('app/HIDE_LOGIN')
+      this.formData.mobile = ''
+      this.formData.verifyCode = ''
+      this.formData.authUserId = ''
     },
     async onSend() {
       if (this.sendStatus > 0) return

+ 11 - 0
components/SimpleLogin/index.vue

@@ -71,6 +71,14 @@ export default {
         this.$setStorage(this.routePrefix, 'userInfo', res.data)
         // 关闭登录窗口
         this.onClose()
+        // 重定向
+        const login_redicret = this.$getStorage(
+          this.routePrefix,
+          'login_redicret'
+        )
+        if (login_redicret && login_redicret !== this.$route.path) {
+          this.$router.push(login_redicret)
+        }
       } catch (error) {
         console.log(error)
       }
@@ -78,6 +86,9 @@ export default {
     // 关闭登录窗口
     onClose() {
       this.$store.commit('app/HIDE_LOGIN')
+      this.formData.mobile = ''
+      this.formData.verifyCode = ''
+      this.formData.authUserId = ''
     },
     async onSend() {
       if (this.sendStatus > 0) return

+ 5 - 0
components/SimpleSearch/index.vue

@@ -3,6 +3,7 @@
     <input
       type="text"
       :placeholder="placeholder"
+      :maxlength="maxLength"
       v-model="inputVal"
       @input="(e) => $emit('input', e.target.value)"
       @keyup.enter="$emit('search', inputVal)"
@@ -17,6 +18,10 @@ export default {
     event: 'input',
   },
   props: {
+    maxLength:{
+      type: String,
+      default: '100',
+    },
     value: {
       type: String,
       default: '',

+ 5 - 0
components/SimpleSwiper/index.vue

@@ -45,5 +45,10 @@ export default {
       background: #535353 !important;
     }
   }
+
+  .slide{
+    display: block;
+    width: 100%;
+  }
 }
 </style>

+ 4 - 2
components/SimpleVideoPlayer/index.vue

@@ -23,12 +23,14 @@ export default {
   },
   watch: {
     show(nVal) {
-      nVal ? this.$refs.video.play() : this.$refs.video.pause()
+      this.$nextTick(() => {
+        nVal ? this.$refs.video.play() : this.$refs.video.pause()
+      })
     },
   },
   methods: {
     open() {
-      this.show = false
+      this.show = true
     },
   },
 }

+ 7 - 0
configs/mode-map.js

@@ -0,0 +1,7 @@
+// 供应商白名单
+export default [
+  {
+    authUserId: 10,
+    mode: 'ldm',
+  },
+]

+ 39 - 0
deploy.sh

@@ -0,0 +1,39 @@
+#!/usr/bin/env sh
+
+set -e
+
+cd /mnt/newdatadrive/data/node-server/zp
+
+# 停止 pm2 服务
+pm2 stop all
+
+# 安装node依赖
+if [$2 == "install"]
+then
+  echo "安装依赖"
+  npm install
+
+if [$1 == "stage"]
+then 
+  echo "运行环境:测试"
+  # 打包项目
+  echo "打包项目"
+  npm run build:stage
+
+  # 使用 pm2 启动项目
+  echo "使用 pm2 启动项目"
+  pm2 start npm -- run start:stage
+elif [$1 == "product"]
+  echo "运行环境:正式"
+  # 打包项目
+  echo "打包项目"
+  npm run build:prod
+
+  # 使用 pm2 启动项目
+  echo "使用 pm2 启动项目"
+  pm2 start npm -- run start:prod
+else
+  echo "缺少相关参数env"  
+fi
+
+cd -

+ 0 - 1
layouts/app-ldm.vue

@@ -98,7 +98,6 @@ export default {
     // 退出登录
     logout() {
       this.$store.dispatch('user/logout')
-      console.log(this.routePrefix)
       this.$removeStorage(this.routePrefix, 'userInfo')
       this.backHome()
     },

+ 32 - 0
middleware/auth.js

@@ -0,0 +1,32 @@
+import modeMap from '~/configs/mode-map'
+import axios from 'axios'
+const whiteList = ['/auth']
+
+export default function ({ route, error }) {
+  if (whiteList.indexOf(route.path) > -1) return
+
+  const authUserId = parseInt(route.params.template)
+  const auth = modeMap.find((item) => item.authUserId === authUserId)
+  let routePrefix = !auth ? `/${authUserId}/app` : `/${authUserId}/${auth.mode}`
+
+  const baseURL = process.env.BASE_URL + '/wx/auth/shop/info'
+  console.log(authUserId)
+  return axios
+    .get(baseURL, {
+      params: { authUserId: authUserId },
+    })
+    .then(({ data }) => {
+      if (data.code === -1 || route.path.indexOf(routePrefix) !== 0) {
+        error({
+          statusCode: 404,
+          message: '页面不存在',
+        })
+      }
+    })
+    .catch(() => {
+      error({
+        statusCode: 404,
+        message: '页面不存在',
+      })
+    })
+}

+ 4 - 12
nuxt.config.js

@@ -1,20 +1,12 @@
-// import generateRoutes from './generate'
-// const list = [
-//   { id: 113, type: 'ldm' },
-//   { id: 102, type: 'app' },
-//   { id: 62, type: 'app' },
-// ]
-// const routes = generateRoutes(list, '_template')
-
 // 运行环境
 const envConfig = require('dotenv').config({
   path: `.env${process.env.ENV ? `.${process.env.ENV}` : ''}`,
 })
 
 export default {
-  // generate: {
-  //   routes: routes,
-  // },
+  router: {
+    middleware: 'auth',
+  },
 
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
@@ -32,7 +24,7 @@ export default {
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
-  css: ['vant/lib/index.css', 'swiper/css/swiper.css'],
+  css: ['vant/lib/index.css', 'swiper/css/swiper.css', '@/styles/global.css'],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [

+ 3 - 1
pages/_template/app/approve/club/index.vue

@@ -93,7 +93,7 @@ export default {
         cityId: '',
         townId: '',
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 9,
       },
       total: 0,
       cityList: [],
@@ -252,6 +252,7 @@ export default {
       width: 120px;
       height: 120px;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 30px;
@@ -390,6 +391,7 @@ export default {
       width: 14.8vw;
       height: 14.8vw;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 4vw;

+ 5 - 3
pages/_template/app/approve/device/index.vue

@@ -18,7 +18,7 @@
         <!-- 搜索区域 -->
         <div class="search">
           <SimpleSearch
-            v-model="listQuery.productName"
+            v-model="listQuery.name"
             @search="onSearch"
             placeholder="搜索设备"
           />
@@ -64,9 +64,9 @@ export default {
       isRequest: true,
       listQuery: {
         authUserId: '',
-        productName: '',
+        name: '',
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 9,
       },
       list: [],
       total: 0,
@@ -136,6 +136,7 @@ export default {
       width: 120px;
       height: 120px;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 30px;
@@ -221,6 +222,7 @@ export default {
       width: 14.8vw;
       height: 14.8vw;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 4vw;

+ 18 - 5
pages/_template/app/approve/device/list.vue

@@ -8,14 +8,18 @@
       @load="onLoadMore"
     >
       <div class="page-top flex flex-col justify-center items-center">
-        <img class="logo" src="https://picsum.photos/200/200" />
-        <span class="name mt-2">上海品辉医疗科技有限公司官方授权设备</span>
+        <img class="logo" :src="supplierInfo.logo" />
+        <div class="mt-2 name">
+          <span v-text="supplierInfo.shopName"></span>
+          <span>官方授权设备</span>
+        </div>
       </div>
       <div class="page-content">
         <!-- 搜索区域 -->
         <div class="search">
           <SimpleSearch
             v-model="listQuery.snCode"
+            maxLength="4"
             @search="onSearch"
             placeholder="搜索设备SN码后四位"
           />
@@ -35,7 +39,7 @@
             <img class="cover" :src="item.productImage" />
             <div class="info">
               <div class="name" v-text="item.productName"></div>
-              <div class="code">SN码:{{ item.snCode }}</div>
+              <div class="code">SN码:{{ item.snCode | formatSnCode }}</div>
               <div class="club-name">
                 所属机构:<span @click.stop="toClubDetail(item)">{{
                   item.clubName
@@ -63,6 +67,12 @@ import { debounce } from '@/utils'
 import { mapGetters } from 'vuex'
 export default {
   layout: 'app',
+  filters: {
+    formatSnCode(code) {
+      if (!code) return ''
+      return code.replace(/^(\w{2})\w+(\w{4})$/, '$1******$2')
+    },
+  },
   data() {
     return {
       isLoadingMore: true,
@@ -72,14 +82,14 @@ export default {
         productTypeId: '',
         snCode: '',
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 9,
       },
       list: [],
       total: 0,
     }
   },
   computed: {
-    ...mapGetters(['routePrefix']),
+    ...mapGetters(['routePrefix', 'supplierInfo']),
     isEmpty() {
       return this.list.length === 0
     },
@@ -112,6 +122,7 @@ export default {
     }, 400),
     // 搜索
     onSearch() {
+      this.list = []
       this.listQuery.pageNum = 1
       this.fetchList()
     },
@@ -149,6 +160,7 @@ export default {
       width: 120px;
       height: 120px;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 30px;
@@ -251,6 +263,7 @@ export default {
       width: 14.8vw;
       height: 14.8vw;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 4vw;

+ 2 - 0
pages/_template/app/approve/index.vue

@@ -82,6 +82,7 @@ export default {
       width: 120px;
       height: 120px;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 30px;
@@ -145,6 +146,7 @@ export default {
       width: 14.8vw;
       height: 14.8vw;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 4vw;

+ 3 - 1
pages/_template/app/approve/personnel/operate/index.vue

@@ -8,7 +8,7 @@
       @load="onLoadMore"
     >
       <div class="page-top flex flex-col justify-center items-center">
-        <img class="logo" src="https://picsum.photos/200/200" />
+        <img class="logo" :src="supplierInfo.logo" />
         <div class="mt-2 name">
           <span v-text="supplierInfo.shopName"></span>
           <span>官方医师认证</span>
@@ -145,6 +145,7 @@ export default {
       width: 120px;
       height: 120px;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 30px;
@@ -253,6 +254,7 @@ export default {
       width: 14.8vw;
       height: 14.8vw;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 4vw;

+ 3 - 1
pages/_template/app/database/article.vue

@@ -74,7 +74,7 @@ export default {
         articleTitle: '',
         authUserId: '102',
         pageNum: 1,
-        pageSize: 4,
+        pageSize: 10,
       },
       list: [],
       total: 0,
@@ -153,6 +153,7 @@ export default {
       width: 120px;
       height: 120px;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 30px;
@@ -231,6 +232,7 @@ export default {
       width: 14.8vw;
       height: 14.8vw;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 4vw;

+ 3 - 1
pages/_template/app/database/file.vue

@@ -77,7 +77,7 @@ export default {
         fileTitle: '',
         authUserId: '',
         pageNum: 1,
-        pageSize: 4,
+        pageSize: 10,
       },
       list: [],
       total: 0,
@@ -160,6 +160,7 @@ export default {
       width: 120px;
       height: 120px;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 30px;
@@ -254,6 +255,7 @@ export default {
       width: 14.8vw;
       height: 14.8vw;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 4vw;

+ 3 - 1
pages/_template/app/database/image.vue

@@ -85,7 +85,7 @@ export default {
         imageTitle: '',
         authUserId: '',
         pageNum: 1,
-        pageSize: 4,
+        pageSize: 10,
       },
       list: [],
       total: 0,
@@ -173,6 +173,7 @@ export default {
       width: 120px;
       height: 120px;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 30px;
@@ -258,6 +259,7 @@ export default {
       width: 14.8vw;
       height: 14.8vw;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 4vw;

+ 3 - 1
pages/_template/app/database/package.vue

@@ -76,7 +76,7 @@ export default {
         fileTitle: '',
         authUserId: '',
         pageNum: 1,
-        pageSize: 4,
+        pageSize: 10,
       },
       list: [],
       total: 0,
@@ -156,6 +156,7 @@ export default {
       width: 120px;
       height: 120px;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 30px;
@@ -228,6 +229,7 @@ export default {
       width: 14.8vw;
       height: 14.8vw;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 4vw;

+ 6 - 4
pages/_template/app/database/video.vue

@@ -45,8 +45,8 @@
               </div>
             </div>
             <div class="cover">
-              <video class="cover" src="123"></video>
-              <span @click="onPlayer"></span>
+              <video class="cover" :src="item.videoPreviewUrl"></video>
+              <span @click="onPlayer(item)"></span>
             </div>
           </div>
         </div>
@@ -59,7 +59,7 @@
       </div>
     </van-list>
 
-    <SimpleVideoPlayer ref="player"></SimpleVideoPlayer>
+    <SimpleVideoPlayer ref="player" :videoSrc="videoUrl"></SimpleVideoPlayer>
   </div>
 </template>
 
@@ -82,7 +82,7 @@ export default {
         videoTitle: '',
         authUserId: '102',
         pageNum: 1,
-        pageSize: 4,
+        pageSize: 10,
       },
       list: [],
       total: 0,
@@ -168,6 +168,7 @@ export default {
       width: 120px;
       height: 120px;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 30px;
@@ -261,6 +262,7 @@ export default {
       width: 14.8vw;
       height: 14.8vw;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 4vw;

+ 2 - 0
pages/_template/app/feedback/index.vue

@@ -78,6 +78,7 @@ export default {
       width: 120px;
       height: 120px;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 30px;
@@ -176,6 +177,7 @@ export default {
       width: 14.8vw;
       height: 14.8vw;
       border-radius: 50%;
+      background: #fff;
     }
     .name {
       font-size: 4vw;

+ 13 - 2
pages/_template/app/index.vue

@@ -79,14 +79,25 @@ export default {
       'accountType',
     ]),
   },
-  created() {},
+  beforeDestroy() {
+    this.$removeStorage(this.routePrefix, 'login_redicret')
+  },
   methods: {
     toDetail(item) {
       const hasLogin = this.$store.getters.accessToken
+      // 保存登录重定向路由
+      this.$setStorage(
+        this.routePrefix,
+        'login_redicret',
+        this.routePrefix + item.path
+      )
       if (item.id > 0 && !hasLogin) {
         // 在微信浏览器中使用微信授权登录
         if (isWeChat() && this.appId && this.accountType === 2) {
-          const payload = { authUserId: this.authUserId, type: this.type }
+          const payload = {
+            authUserId: this.authUserId,
+            routePrefix: this.routePrefix,
+          }
           return toAuthorization(this.appId, payload)
         }
         this.$toast({ message: '请先登录', duration: 1000 })

+ 1 - 1
pages/_template/ldm/approve/club/index.vue

@@ -80,7 +80,7 @@ export default {
         cityId: '',
         townId: '',
         pageNum: 1,
-        pageSize: 4,
+        pageSize: 10,
       },
       total: 0,
       cityList: [],

+ 5 - 5
pages/_template/ldm/database/package.vue

@@ -34,10 +34,7 @@
         </div>
 
         <!-- 列表为空 -->
-        <SimpleEmpty
-          v-if="!total && !isRequest"
-          description="敬请期待~"
-        ></SimpleEmpty>
+        <LdmEmpty v-if="!total && !isRequest" name="ldm-empty.png"></LdmEmpty>
       </div>
     </van-list>
   </div>
@@ -60,7 +57,7 @@ export default {
         fileTitle: '',
         authUserId: '',
         pageNum: 1,
-        pageSize: 4,
+        pageSize: 10,
       },
       list: [],
       total: 0,
@@ -89,6 +86,7 @@ export default {
         this.total = res.data.total
         this.isLoadingMore = false
         this.listQuery.pageNum += 1
+        this.isRequest = false
       } catch (error) {
         console.log(error)
       }
@@ -117,6 +115,7 @@ export default {
       height: 61px;
       width: 311px;
       display: block;
+      background: #fff;
     }
 
     .name {
@@ -180,6 +179,7 @@ export default {
       height: 11.5vw;
       width: 59vw;
       display: block;
+      background: #fff;
     }
 
     .name {

+ 12 - 1
pages/_template/ldm/index.vue

@@ -60,17 +60,28 @@ export default {
     ...mapGetters(['authUserId', 'appId', 'routePrefix', 'accountType']),
   },
 
+  beforeDestroy() {
+    this.$removeStorage(this.routePrefix, 'login_redicret')
+  },
+
   methods: {
     toDetail(item) {
+      // 保存登录重定向路由
+      this.$setStorage(
+        this.routePrefix,
+        'login_redicret',
+        this.routePrefix + item.path
+      )
       const hasLogin = this.$store.getters.accessToken
       if (item.id > 0 && !hasLogin) {
         // 在微信浏览器中使用微信授权登录
         if (isWeChat() && this.appId && this.accountType === 2) {
-          const payload = { authUserId: this.authUserId, type: this.type }
+          const payload = { authUserId: this.authUserId, routePrefix: this.routePrefix }
           return toAuthorization(this.appId, payload)
         }
         this.$toast({ message: '请先登录', duration: 1000 })
         this.$store.commit('app/SHOW_LOGIN')
+
         return
       }
       const url = this.routePrefix + item.path

+ 28 - 10
pages/auth/index.vue

@@ -47,6 +47,9 @@ export default {
   mounted() {
     this.initData()
   },
+  beforeDestroy() {
+    this.$removeStorage(this.redirectPath, 'login_redicret')
+  },
   methods: {
     // 初始化数据
     initData() {
@@ -56,6 +59,10 @@ export default {
       this.formData.appId = appId
       this.formData.authUserId = parseInt(authUserId)
       this.redirectPath = `/${authUserId}/${type}`
+      // 保存页面路由前缀
+      this.$store.commit('app/SET_ROUTE_PREFIX', this.redirectPath)
+      // 保存用户AppId
+      this.$store.commit('user/SET_AUTH_USER_ID', this.formData.authUserId)
       // 尝试微信授权自动登录
       this.autoLogin()
     },
@@ -63,18 +70,29 @@ export default {
     // 绑定并登录
     async onSubmit() {
       try {
-        const res = await this.$http.api.customLogin(this.formData)
-        this.$store.dispatch('user/login', res.data)
-        this.$setStorage(this.redirectPath, 'userInfo', res.data)
-        this.$toast('登录成功')
-        setTimeout(() => {
-          this.$router.push(this.redirectPath)
-        }, 500)
+        const res = await this.$http.api.wechatLoginWithCode(this.formData)
+        this.loginSuccess(res)
       } catch (error) {
         console.log(error)
       }
     },
 
+    loginSuccess(res) {
+      this.$toast('登录成功')
+      this.$store.dispatch('user/login', res.data)
+      this.$setStorage(this.redirectPath, 'userInfo', res.data)
+      // 重定向
+      const login_redicret = this.$getStorage(
+        this.redirectPath,
+        'login_redicret'
+      )
+      if (login_redicret && login_redicret !== this.$route.path) {
+        this.$router.push(login_redicret)
+      } else {
+        this.$router.push(this.redirectPath)
+      }
+    },
+
     // 发送验证码
     async onSend() {
       if (this.sendStatus > 0) return
@@ -117,8 +135,7 @@ export default {
           code: this.code,
           appId: this.formData.appId,
         })
-        this.$store.dispatch('user/login', res.data)
-        this.$router.push(this.path)
+        this.loginSuccess(res)
       } catch (error) {
         // 未绑定微信号
         if (error.code === -2) {
@@ -127,9 +144,10 @@ export default {
           this.formData.openId = error.data.openId
           this.formData.accessToken = error.data.accessToken
         } else {
+          this.$toast('登陆失败请重试')
           // 其他错误跳转首页
           setTimeout(() => {
-            this.$router.push(this.path)
+            this.$router.push(this.redirectPath)
           }, 1000)
         }
       }

+ 8 - 1
plugins/axios.js

@@ -22,7 +22,15 @@ export default function (context) {
     if (!res.code) return res
     // 请求失败
     if (res.code === -1) {
+      console.log(store.getters.routePrefix)
       Toast(res.msg || '服务器开小差了')
+      if (res.msg.indexOf('code been used') > -1) {
+        try {
+          redirect(store.getters.routePrefix)
+        } catch (error) {
+          console.log(error)
+        }
+      }
     }
     // 登录过期
     if (res.code === -99) {
@@ -33,7 +41,6 @@ export default function (context) {
         confirmButtonColor: 'linear-gradient(to left, #404040, #101010)',
       })
       if (result === 'confirm') {
-        console.log(store.getters.routePrefix)
         redirect(store.getters.routePrefix)
       }
     }

+ 0 - 1
store/user.js

@@ -11,7 +11,6 @@ const mutations = {
   SET_USER_INFO(state, data) {
     state.userInfo = data
     state.accessToken = data.accessToken
-    state.appId = data.appId
   },
   // 设置appId
   SET_APPID(state, appId) {

+ 3 - 0
styles/global.css

@@ -0,0 +1,3 @@
+.__nuxt-error-page svg {
+  display: inline-block;
+}