ytj

package-lock.json

@@ -14846,6 +14846,11 @@
       "integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
+      "integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w=="
+    },
     "w3c-hr-time": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz",

package.json

@@ -18,7 +18,8 @@
     "element-ui": "^2.4.5",
     "vue": "^2.5.2",
     "vue-cookie": "^1.1.4",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/components/tableSearch/index.vue

@@ -2,7 +2,7 @@
   <div class="tableSearch flex-h">
     <div class="flex-item">
       <el-input
-        placeholder="请输入内容"
+        :placeholder="value==undefined ? '请输入内容' : value"
         v-model="key"
         clearable>
       </el-input>
@@ -16,7 +16,7 @@
 <script>
 export default {
   name: '',
-  props: [''],
+  props: ['value'],
   data () {
     return {
       key: ''
@@ -24,7 +24,7 @@ export default {
   },
   mounted () {
     this.$nextTick(function () {
-      // console.log(this.menu)
+      // console.log(this.value)
     })
   },
   methods: {

src/main.js

@@ -9,6 +9,8 @@ import './style/main.css'
 import router from './router'
 import Ajax from './util/ajax'
 import api from './util/api'
+import store from './store'
+
 Vue.use(ElementUI)
 Vue.use(Cookies)
 
@@ -19,6 +21,7 @@ Vue.prototype.$ajax = Ajax
 new Vue({
   el: '#app',
   router,
+  store,
   components: { App },
   template: '<App/>'
 })

src/pages/system/caseManger/caseAreaManger/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="subPage">
+    <div class="system-table-search">
+      <div class="flex-h">
+        <div class="flex-item flex-h"></div>
+        <ul>
+          <li>
+            <span>选择案场：</span>
+            <el-select v-model="tableSearch.caseId" placeholder="请选择">
+              <el-option
+                v-for="item in caseList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </li>
+        </ul>
+        <tableSearch value="请输入区域名" @exportSearchKey="searchList"></tableSearch>
+      </div>
+      <div class="moreFilter"></div>
+    </div>
+    <div class="system-table-box">
+      <el-table
+        :data="tableData"
+        stripe
+        style="width: 100%">
+        <el-table-column
+          prop="areaName"
+          label="区域名">
+        </el-table-column>
+        <el-table-column
+          prop="icon"
+          label="图标">
+          <template slot-scope="scope">
+            <a class="tableImg">
+              <img src="" class="centerLabel contain" alt="">
+            </a>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="case"
+          label="案场">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="success"
+              @click="editItem(scope.$index, scope.row)">编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="deleteItem(scope.$index, scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage"
+      :page-size="10"
+      layout="prev, pager, next, jumper"
+      :total="100">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+import tableSearch from '@/components/tableSearch/index'
+
+const { mapState: mapCaseState } = createNamespacedHelpers('case')
+
+export default {
+  name: '',
+  data () {
+    return {
+      currentPage: 0, // 当前页码
+      tableSearch: { // 表格搜索条件
+        key: '', // 搜索关键字
+        caseId: '', // 案场id
+      },
+      tableData: [{
+        areaName: 'xxx',
+        icon: 'xxx',
+        case: 'xxx'
+      }, {
+        areaName: 'xxx',
+        icon: 'xxx',
+        case: 'xxx'
+      }, {
+        areaName: 'xxx',
+        icon: 'xxx',
+        case: 'xxx'
+      }, {
+        areaName: 'xxx',
+        icon: 'xxx',
+        case: 'xxx'
+      }]
+    }
+  },
+  computed: {
+    ...mapCaseState({
+      caseList: x => x.caseList,
+    })
+  },
+  components: {
+    tableSearch,
+  },
+  methods: {
+    handleSizeChange (val) {
+      console.log(`每页 ${val} 条`)
+    },
+    handleCurrentChange (val) {
+      console.log(`当前页: ${val}`)
+    },
+    editItem (index, row) { // 编辑
+      console.log(index, row)
+    },
+    deleteItem (index, row) { // 删除
+      console.log(index, row)
+      this.$confirm('确认删除此数据?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    searchList (key) { // 搜索列表
+      console.log(key)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/system/caseManger/caseInfo/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="subPage">
+    <div class="system-table-search">
+      <div class="flex-h">
+        <div class="flex-item flex-h">
+          <el-button size="mini" type="success">新增案场</el-button>
+        </div>
+        <tableSearch value="请输入案场名称" @exportSearchKey="searchList"></tableSearch>
+      </div>
+      <div class="moreFilter"></div>
+    </div>
+    <div class="system-table-box">
+      <el-table
+        :data="tableData"
+        stripe
+        style="width: 100%">
+        <el-table-column
+          prop="id"
+          label="ID">
+        </el-table-column>
+        <el-table-column
+          prop="caseName"
+          label="案场名称">
+        </el-table-column>
+        <el-table-column
+          prop="address"
+          label="地址">
+        </el-table-column>
+        <el-table-column
+          prop="leader"
+          label="负责人">
+        </el-table-column>
+        <el-table-column
+          prop="phone"
+          label="手机号码">
+        </el-table-column>
+        <el-table-column
+          prop="availableAmount"
+          label="账户可用金额">
+        </el-table-column>
+        <el-table-column
+          prop="creatPerson"
+          label="创建人">
+        </el-table-column>
+        <el-table-column
+          prop="creatTime"
+          label="创建时间">
+        </el-table-column>
+        <el-table-column label="操作" width="200">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="danger"
+              @click="editItem(scope.$index, scope.row)">修改</el-button>
+            <el-button
+              size="mini"
+              type="success"
+              @click="keyManger(scope.$index, scope.row)">钥匙管理</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage"
+      :page-size="10"
+      layout="prev, pager, next, jumper"
+      :total="100">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import tableSearch from '@/components/tableSearch/index'
+
+export default {
+  name: '',
+  data () {
+    return {
+      currentPage: 0, // 当前页码
+      tableSearch: { // 表格搜索条件
+        key: '', // 搜索关键字
+        sort: '', // 排序规则
+      },
+      tableData: [{
+        id: 'xxx',
+        caseName: 'xxx',
+        address: 'xxx',
+        leader: 'xxx',
+        phone: 'xxx',
+        availableAmount: 'xxx',
+        creatPerson: 'xxx',
+        creatTime: 'xxx'
+      }, {
+        id: 'xxx',
+        caseName: 'xxx',
+        address: 'xxx',
+        leader: 'xxx',
+        phone: 'xxx',
+        availableAmount: 'xxx',
+        creatPerson: 'xxx',
+        creatTime: 'xxx'
+      }, {
+        id: 'xxx',
+        caseName: 'xxx',
+        address: 'xxx',
+        leader: 'xxx',
+        phone: 'xxx',
+        availableAmount: 'xxx',
+        creatPerson: 'xxx',
+        creatTime: 'xxx'
+      }, {
+        id: 'xxx',
+        caseName: 'xxx',
+        address: 'xxx',
+        leader: 'xxx',
+        phone: 'xxx',
+        availableAmount: 'xxx',
+        creatPerson: 'xxx',
+        creatTime: 'xxx'
+      }]
+    }
+  },
+  components: {
+    tableSearch,
+  },
+  methods: {
+    handleSizeChange (val) {
+      console.log(`每页 ${val} 条`)
+    },
+    handleCurrentChange (val) {
+      console.log(`当前页: ${val}`)
+    },
+    editItem (index, row) { // 修改
+      console.log(index, row)
+    },
+    keyManger (index, row) { // 钥匙管理
+      console.log(index, row)
+    },
+    searchList (key) { // 搜索列表
+      console.log(key)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/system/caseManger/caseInfo/page.scss

@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/pages/system/caseManger/caseTableManger/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="subPage">
+    <div class="system-table-search">
+      <div class="flex-h">
+        <div class="flex-item flex-h"></div>
+        <ul>
+          <li>
+            <span>选择案场：</span>
+            <el-select v-model="tableSearch.caseId" placeholder="请选择">
+              <el-option
+                v-for="item in caseList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </li>
+        </ul>
+        <tableSearch value="请输入桌编号" @exportSearchKey="searchList"></tableSearch>
+      </div>
+      <div class="moreFilter"></div>
+    </div>
+    <div class="system-table-box">
+      <el-table
+        :data="tableData"
+        stripe
+        style="width: 100%">
+        <el-table-column
+          prop="tableId"
+          label="桌编号">
+        </el-table-column>
+        <el-table-column
+          prop="area"
+          label="区域">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="success"
+              @click="editItem(scope.$index, scope.row)">编辑</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="deleteItem(scope.$index, scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage"
+      :page-size="10"
+      layout="prev, pager, next, jumper"
+      :total="100">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+import tableSearch from '@/components/tableSearch/index'
+
+const { mapState: mapCaseState } = createNamespacedHelpers('case')
+
+export default {
+  name: '',
+  data () {
+    return {
+      currentPage: 0, // 当前页码
+      tableSearch: { // 表格搜索条件
+        key: '', // 搜索关键字
+        caseId: '', // 案场id
+      },
+      tableData: [{
+        tableId: 'xxx',
+        area: 'xxx'
+      }, {
+        tableId: 'xxx',
+        area: 'xxx'
+      }, {
+        tableId: 'xxx',
+        area: 'xxx'
+      }, {
+        tableId: 'xxx',
+        area: 'xxx'
+      }]
+    }
+  },
+  computed: {
+    ...mapCaseState({
+      caseList: x => x.caseList,
+    })
+  },
+  components: {
+    tableSearch,
+  },
+  methods: {
+    handleSizeChange (val) {
+      console.log(`每页 ${val} 条`)
+    },
+    handleCurrentChange (val) {
+      console.log(`当前页: ${val}`)
+    },
+    editItem (index, row) { // 编辑
+      console.log(index, row)
+    },
+    deleteItem (index, row) { // 删除
+      console.log(index, row)
+      this.$confirm('确认删除此数据?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    searchList (key) { // 搜索列表
+      console.log(key)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/system/caseManger/caseTableManger/page.scss

@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/pages/system/caseManger/keyManger/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="subPage">
+    <div class="system-table-search">
+      <div class="flex-h">
+        <div class="flex-item flex-h"></div>
+        <ul>
+          <li>
+            <span>选择案场：</span>
+            <el-select v-model="tableSearch.caseId" placeholder="请选择">
+              <el-option
+                v-for="item in caseList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </li>
+        </ul>
+        <tableSearch value="请输入锁柜编号" @exportSearchKey="searchList"></tableSearch>
+      </div>
+      <div class="moreFilter"></div>
+    </div>
+    <div class="system-table-box">
+      <el-table
+        :data="tableData"
+        stripe
+        style="width: 100%">
+        <el-table-column
+          prop="lockersId"
+          label="锁柜编号">
+        </el-table-column>
+        <el-table-column
+          prop="currentUser"
+          label="当前用户">
+        </el-table-column>
+        <el-table-column
+          prop="status"
+          label="状态">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="danger"
+              @click="unBindItem(scope.$index, scope.row)">解绑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="currentPage"
+      :page-size="10"
+      layout="prev, pager, next, jumper"
+      :total="100">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+import tableSearch from '@/components/tableSearch/index'
+
+const { mapState: mapCaseState } = createNamespacedHelpers('case')
+
+export default {
+  name: '',
+  data () {
+    return {
+      currentPage: 0, // 当前页码
+      tableSearch: { // 表格搜索条件
+        key: '', // 搜索关键字
+        caseId: '', // 案场id
+      },
+      tableData: [{
+        lockersId: 'xxx',
+        currentUser: 'xxx',
+        status: 'xxx'
+      }, {
+        lockersId: 'xxx',
+        currentUser: 'xxx',
+        status: 'xxx'
+      }, {
+        lockersId: 'xxx',
+        currentUser: 'xxx',
+        status: 'xxx'
+      }, {
+        lockersId: 'xxx',
+        currentUser: 'xxx',
+        status: 'xxx'
+      }]
+    }
+  },
+  computed: {
+    ...mapCaseState({
+      caseList: x => x.caseList,
+    })
+  },
+  components: {
+    tableSearch,
+  },
+  methods: {
+    handleSizeChange (val) {
+      console.log(`每页 ${val} 条`)
+    },
+    handleCurrentChange (val) {
+      console.log(`当前页: ${val}`)
+    },
+    unBindItem (index, row) { // 解绑
+      console.log(index, row)
+      this.$confirm('确认解绑此锁柜?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: '解绑成功!'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消解绑'
+        })
+      })
+    },
+    searchList (key) { // 搜索列表
+      console.log(key)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/system/caseManger/keyManger/page.scss

@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/pages/system/channelManagement/channelList/index.vue → src/pages/system/channelManager/channelList/index.vue

@@ -5,6 +5,19 @@
         <div class="flex-item flex-h">
           <el-button size="mini" type="success">新增渠道</el-button>
         </div>
+        <ul>
+          <li>
+            <span>选择案场：</span>
+            <el-select v-model="tableSearch.caseId" placeholder="请选择">
+              <el-option
+                v-for="item in caseList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </li>
+        </ul>
         <tableSearch @exportSearchKey="searchList"></tableSearch>
       </div>
       <div class="moreFilter"></div>
@@ -16,8 +29,7 @@
         style="width: 100%">
         <el-table-column
           prop="channelName"
-          label="渠道名"
-          width="180">
+          label="渠道名">
         </el-table-column>
         <el-table-column
           prop="channelCode"
@@ -49,6 +61,9 @@
 
 <script>
 import tableSearch from '@/components/tableSearch/index'
+import { createNamespacedHelpers } from 'vuex'
+
+const { mapState: mapCaseState } = createNamespacedHelpers('case')
 
 export default {
   name: '',
@@ -56,7 +71,8 @@ export default {
     return {
       currentPage: 0, // 当前页码
       tableSearch: { // 表格搜索条件
-        key: '111', // 搜索关键字
+        key: '', // 搜索关键字
+        caseId: '', // 案场id
       },
       tableData: [{
         channelName: 'xxx',
@@ -73,6 +89,11 @@ export default {
       }]
     }
   },
+  computed: {
+    ...mapCaseState({
+      caseList: x => x.caseList,
+    })
+  },
   components: {
     tableSearch,
   },

src/pages/system/channelManager/channelList/page.scss

@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/pages/system/index.vue

@@ -60,11 +60,23 @@ export default {
           children: [],
         }],
       }, {
-        title: '会员管理',
+        title: '案场管理',
         pathName: '',
         children: [{
-          title: '会员列表',
-          pathName: 'customerList',
+          title: '案场信息',
+          pathName: 'caseInfo',
+          children: [],
+        }, {
+          title: '钥匙管理',
+          pathName: 'keyManger',
+          children: [],
+        }, {
+          title: '案场区域管理',
+          pathName: 'caseAreaManger',
+          children: [],
+        }, {
+          title: '案场桌位管理',
+          pathName: 'caseTableManger',
           children: [],
         }],
       }, {
@@ -87,12 +99,20 @@ export default {
         title: '一级菜单4',
         pathName: '',
         children: [],
+      }, {
+        title: '会员管理',
+        pathName: '',
+        children: [{
+          title: '会员列表',
+          pathName: 'customerList',
+          children: [],
+        }],
       }, {
         title: '角色管理',
         pathName: '',
         children: [{
           title: '角色列表',
-          pathName: 'customerList',
+          pathName: 'roleList',
           children: [],
         }],
       }]

src/pages/system/page.js

@@ -1,8 +1,13 @@
 
-import system from './index'
-import channelList from './channelManagement/channelList/index'
-import customerList from './customerManagement/customerList/index'
-import roleList from './roleManagement/roleList/index'
+import system from './index' // 系统首页
+
+import channelList from './channelManager/channelList/index' // 渠道管理
+import customerList from './customerManagement/customerList/index'//会员列表
+import roleList from './roleManagement/roleList/index' //角色列表
+import caseInfo from './caseManger/caseInfo/index' // 案场信息
+import keyManger from './caseManger/keyManger/index' // 钥匙管理
+import caseAreaManger from './caseManger/caseAreaManger/index' // 案场区域管理
+import caseTableManger from './caseManger/caseTableManger/index' // 案场桌位管理
 
 export default {
   router: [
@@ -10,11 +15,31 @@ export default {
       path: '/system',
       name: 'system',
       component: system,
-      children: [{
+      children: [{ // 渠道管理
         path: 'channelList',
         name: 'channelList',
         component: channelList,
         children: [],
+      }, { // 案场信息
+        path: 'caseInfo',
+        name: 'caseInfo',
+        component: caseInfo,
+        children: [],
+      }, { // 钥匙管理
+        path: 'keyManger',
+        name: 'keyManger',
+        component: keyManger,
+        children: [],
+      }, { // 案场区域管理
+        path: 'caseAreaManger',
+        name: 'caseAreaManger',
+        component: caseAreaManger,
+        children: [],
+      }, { // 案场桌位管理
+        path: 'caseTableManger',
+        name: 'caseTableManger',
+        component: caseTableManger,
+        children: [],
       }, {
         path: 'customerList',
         name: 'customerList',
@@ -23,9 +48,7 @@ export default {
       }, {
         path: 'roleList',
         name: 'roleList',
-        component: roleList,
-        children: [],
-      }],
+        component: roleList,],
     },
   ],
 }

src/store/case/index.js

@@ -0,0 +1,20 @@
+export default {
+  namespaced: true,
+  state: {
+    caseList: [{
+      value: '0',
+      label: '案场1'
+    }, {
+      value: '1',
+      label: '案场2'
+    }, {
+      value: '2',
+      label: '案场3'
+    }, {
+      value: '',
+      label: '不限'
+    }],
+  },
+  mutations: {},
+  actions: {},
+}

src/store/index.js

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  state: {
+    loadding: false,
+  }
+})
+
+export const modules = {
+  case: () => require('./case').default,
+}
+
+Object.keys(modules).forEach((modKey) => {
+  const modNS = modKey.split('/')
+  const getMod = modules[modKey]
+
+  store.registerModule(...modNS, getMod())
+})
+
+export default store

src/style/main.css

@@ -189,4 +189,49 @@ select:focus {
 
 .el-pagination>*:last-child{
   margin-right: 20px
-}
+}
+
+.el-table .cell{
+  text-align: center;
+}
+
+.moreFilter>ul{
+  font-size: 0;
+}
+
+.moreFilter>ul>li{
+  display: inline-block;
+  margin: 10px 20px 0 0;
+}
+
+.system-table-search li{
+  margin-right: 20px;
+}
+
+.tableImg{
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  background: #eee;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+