工作台历

src/api/modules/note.js

@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+import { fileDown } from '../../utils/file'
+import md5 from 'js-md5'
+/*
+* 便签
+*/
+export default {
+  list(params) {
+    return request.get(`note`, { params: params })
+  },
+  detail(params) {
+    return request.get(`note/${params}`)
+  },
+  simpleAll() {
+    return request.get(`note/simpleAll`)
+  },
+  add(params) {
+    return request.post(`note`, params)
+  },
+  edit(params) {
+    return request.put(`note`, params)
+  },
+   delete(params) {
+     return request.delete(`note/${params}`)
+   },
+  listByDate(params) {
+    return request.get(`note/list`, { params: params })
+  },
+  countByDate(params) {
+    return request.get(`note/count/${params}`)
+  },
+}

src/api/modules/visit.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+import { fileDown } from '../../utils/file'
+import md5 from 'js-md5'
+/*
+* 客户拜访
+*/
+export default {
+  list(params) {
+    return request.get(`visit`, { params: params })
+  },
+  detail(params) {
+    return request.get(`visit/${params}`)
+  },
+  simpleAll() {
+    return request.get(`visit/simpleAll`)
+  },
+  add(params) {
+    return request.post(`visit`, params)
+  },
+  edit(params) {
+    return request.put(`visit`, params)
+  },
+   delete(params) {
+     return request.delete(`visit/${params}`)
+   },
+}

src/router/urlMap.js

@@ -42,6 +42,10 @@ import _views_market_business_detail from '@/views/market/business/detail'
 import _views_market_business_add from '@/views/market/business/detail'
 import _views_market_payment from '@/views/market/payment/list'
 import _views_market_payment_list from '@/views/market/payment/detailList'
+import _views_market_visit from '@/views/market/visit/list'
+import _views_market_visit_add from '@/views/market/visit/detail'
+import _views_market_visit_detail from '@/views/market/visit/detail'
+import _views_market_index from '@/views/market/index'
 
 export default {
   _views_set_menu,
@@ -72,5 +76,9 @@ export default {
   _views_market_business_detail,
   _views_market_business_add,
   _views_market_payment,
-  _views_market_payment_list
+  _views_market_payment_list,
+  _views_market_visit,
+  _views_market_visit_add,
+  _views_market_visit_detail,
+  _views_market_index
 }

src/views/item/itemIndex.vue

@@ -46,7 +46,7 @@
       return {
         logStaticsInfo:{},
         stages: [[]],
-        state:'进行中'
+        state:'进行中',
       }
     },
     mounted() {

src/views/market/index.vue

@@ -0,0 +1,301 @@
+<template>
+  <div class="app-container">
+    <y-data-view-page-layout title="市场管理首页" class="staff-admin-index">
+      <y-data-view-module>
+        <div>
+          <y-d-v-over-view style="width: 250px" title="本年签约目标" :typeId="1" :ico="require('@/assets/statics/pg8.png')" :data="[{text:logStaticsInfo.currentDayNum,value:'个'}]"></y-d-v-over-view>
+          <y-d-v-over-view style="width: 250px" title="本年回款目标" :typeId="2" :ico="require('@/assets/statics/pg8.png')" :data="[{text:logStaticsInfo.userName,value:'元'}]" ></y-d-v-over-view>
+          <y-d-v-over-view style="width: 250px" title="潜在商机" :typeId="3" :ico="require('@/assets/statics/pg8.png')" :data="[{text:logStaticsInfo.logDate,value:'个'}]" ></y-d-v-over-view>
+          <y-d-v-over-view style="width: 250px" title="本年已签约" :typeId="4" :ico="require('@/assets/statics/pg9.png')" :data="[{text:logStaticsInfo.totalNum,value:'个'}]" ></y-d-v-over-view>
+          <y-d-v-over-view style="width: 250px" title="本年已回款" :typeId="5" :ico="require('@/assets/statics/pg9.png')" :data="[{text:logStaticsInfo.logDate,value:'元'}]" ></y-d-v-over-view>
+          <y-d-v-over-view style="width: 250px" title="本月已回款" :typeId="6" :ico="require('@/assets/statics/pg9.png')" :data="[{text:logStaticsInfo.logDate,value:'元'}]" ></y-d-v-over-view>
+        </div>
+      </y-data-view-module>
+      <div class="calendar-class">
+        <span style="margin-left: 20px">工作台历</span>
+        <el-calendar v-model="value">
+          <div class="cell"
+            slot="dateCell"
+            slot-scope="{date, data}" @click="openDrawer(data)" style="width: 100%;height: 100%">
+            <span :class="data.isSelected ? 'is-selected' : ''" >
+              {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
+            </span>
+            <el-icon v-if="checkStar(data.day)"  class="el-icon-star-on" style="color: #ffdf1a;font-size: 30px "/>
+          </div>
+        </el-calendar>
+      </div>
+      <el-drawer
+        :title="title"
+        :before-close="handleClose"
+        :visible.sync="dialog"
+        direction="rtl"
+        custom-class="demo-drawer"
+        ref="drawer"
+      >
+        <div class="demo-drawer__content">
+          <el-form :model="form">
+            <el-col :span="10" style="padding-right: 10px">
+              <y-data-view-module>
+                <el-button type="warning" style="position: absolute;top:20px;right:60px;font-weight: bolder;cursor: pointer" @click="dialogVisible = true" >添加内容</el-button>
+                <div class="plan-class">
+                  <div style="width: 530px;display: flex" v-for="(item,index) in dynamicTags">
+                    <span style="display:inline-block;width:500px;word-break: break-all; white-space:normal;margin: 10px 10px 10px 10px;line-height: 25px;">
+                      {{ index+1 }}、{{ item.content }}
+                    </span>
+                    <el-icon class="el-icon-circle-close" style="color: red;cursor:pointer;" @click.native="deltag(item.id)"/>
+                  </div>
+                  <span v-if="dynamicTags.length<8 & dynamicTags.length!=0" style="display:inline-block;width:530px;height:400px;word-break: break-all; white-space:normal;margin: 10px 10px 10px 10px;line-height: 25px;" >
+                  </span>
+                  <div class="plan-class" v-if="dynamicTags.length===0">
+                    <span style="display:inline-block;width:530px;height:500px;word-break: break-all; white-space:normal;margin: 10px 10px 10px 10px;line-height: 25px;">
+                    </span>
+                  </div>
+                </div>
+              </y-data-view-module>
+              <el-dialog
+                title="便签内容"
+                :visible.sync="dialogVisible"
+                width="30%"
+                custom-class="tag-class"
+              >
+                <el-input
+                  type="textarea"
+                  :rows="2"
+                  placeholder="请输入内容"
+                  v-model="textareadata"
+                />
+                <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="addtag">确 定</el-button>
+              </span>
+              </el-dialog>
+            </el-col>
+          </el-form>
+        </div>
+      </el-drawer>
+    </y-data-view-page-layout>
+  </div>
+</template>
+<script>
+  import YDVOverView from '@/components/YDataViewPageLayout/YDVOverView'
+  import YDataViewModule from '@/components/YDataViewPageLayout/YDataViewModule'
+  import YDataViewPageLayout from '@/components/YDataViewPageLayout'
+
+  export default {
+    name: 'logIndex',
+    components: {
+      YDVOverView,
+      YDataViewModule,
+      YDataViewPageLayout
+    },
+    data() {
+      return {
+        value: new Date(),
+        logStaticsInfo:{},
+        table: false,
+        dialog: false,
+        loading: false,
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        formLabelWidth: '80px',
+        timer: null,
+        currentDate:'',
+        editId:'',
+        textareadata:'',
+        dialogVisible:false,
+        dynamicTags: [],
+        calandarList:[],
+      }
+    },
+    created() {
+      this.getCanlendarList();
+    },
+    computed:{
+      title(){
+        return this.currentDate +" 工作计划";
+      },
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.getLogStat();
+      })
+    },
+    methods: {
+      getCanlendarList(){
+
+        let userId = this.$store.getters.userInfo.id;
+
+        this.$api.note.countByDate(userId).then(data => {
+          if (data.code ===200){
+            this.calandarList = data.data
+          }else{
+            this.$message.success(data.msg)
+          }
+
+        })
+      },
+      checkStar(day){
+        this.flag = false;
+        for(let item of this.calandarList){
+          if (item.noteDate === day){
+            this.flag = true;
+          }
+        }
+        return this.flag;
+      },
+      addtag(){
+        let data = {
+          noteDate:this.currentDate,
+          content:this.textareadata,
+          userId: this.$store.getters.userInfo.id
+        }
+        this.$api.note.add(data).then(data => {
+          if (data.code ===200){
+            this.$message.success('保存成功')
+            this.dialogVisible=false
+            this.textareadata = ''
+            this.tagdata()
+            this.editId = ''
+            this.getCanlendarList();
+          }else{
+            this.$message.success(data.msg)
+          }
+
+        })
+      },
+      tagdata(){
+        let data = {
+          noteDate:this.currentDate,
+          userId: this.$store.getters.userInfo.id
+        }
+        this.$api.note.listByDate(data).then(data => {
+          if (data.code ===200){
+            this.dynamicTags = data.data
+          }else{
+            this.$message.success(data.msg)
+          }
+
+        })
+      },
+      deltag(val){
+        console.log(val)
+        this.$api.note.delete(val).then(data => {
+          if (data.code ===200){
+            this.$message.success('删除成功')
+            this.tagdata()
+            this.getCanlendarList();
+          }else{
+            this.$message.success(data.msg)
+          }
+
+        })
+      },
+      handleClose(done) {
+        if (this.loading) {
+          return;
+        }
+          done();
+          // 动画关闭需要一定的时间
+          setTimeout(() => {
+            this.loading = false;
+          }, 400);
+      },
+      cancelForm() {
+        this.loading = false;
+        this.dialog = false;
+        clearTimeout(this.timer);
+      },
+      openDrawer(date){
+        console.log(date);
+        this.dialog = true
+        this.currentDate = date.day;
+        this.tagdata();
+      },
+      getLogStat(){
+        this.$api.itemLog.getLogStat().then(res => {
+          if (res.code === 200){
+            this.logStaticsInfo = res.data;
+          }
+        });
+      },
+    }
+    }
+</script>
+<style lang="css" scoped>
+
+  .calendar-class{
+    margin-left: 20px;
+    height: 500px;
+  }
+  .plan-class{
+    /*width: 540px;*/
+    /*border: 1px solid darkgray;*/
+    /*box-shadow: 10px 10px 5px #888888;;*/
+    /*border-radius: 10px;*/
+    /*overflow: auto;*/
+    width: 540px;
+    -moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
+    -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
+    background:
+      -moz-repeating-linear-gradient(
+        top,
+        #fcf59b,
+        #fcf59b 29px,
+        #81cbbc 30px
+      );
+
+    background:
+      -webkit-gradient(
+        linear,
+        left top, left bottom,
+        from(#81cbbc),
+        color-stop(2%, #fcf59b)
+      );
+
+    background:
+      repeating-linear-gradient(
+        top,
+        #fcf59b,
+        #fcf59b 29px,
+        #81cbbc 30px
+      );
+
+    -webkit-background-size: 100% 30px;
+  }
+  .plan-class:after {
+    width: 180px;
+    height: 30px;
+    content: " ";
+    margin-left: -90px;
+    border: 1px solid rgba(200, 200, 200, .8);
+    background: rgba(254, 254, 254, .6);
+
+    -moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
+
+    -moz-transform: rotate(-5deg);
+    -webkit-transform: rotate(-5deg);
+    -o-transform: rotate(-5deg);
+    transform: rotate(-5deg);
+
+    position: absolute;
+    left: 50%;
+    top: 95px;
+  }
+  /deep/.tag-class{
+    border-radius: 20px;
+  }
+  div.cell{
+    float: right;
+  }
+</style>

src/views/market/visit/detail.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="app-container">
+    <div class="title-container">
+      <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
+    </div>
+    <y-detail-page-layout @save="handleCreate" :edit-status="true" v-loading="vLoading" element-loading-text="处理中。。。">
+      <div style="padding-top: 30px;">
+        <el-tabs v-model="activeName">
+          <el-tab-pane label="拜访详情" name="first">
+            <el-form ref="postForm" :model="postForm" class="form-container" style="padding-left: 500px">
+              <div>
+                <div class="postInfo-container">
+                  <el-row>
+                    <el-col :xs="24" :sm="12" :lg="10" :span="6">
+                      <el-form-item
+                        label="客户名称："
+                        prop="customerId"
+                        label-width="180px"
+                        class="postInfo-container-item"
+                        :rules="{required: true, message: '请填选择客户名称', trigger: 'blur'}"
+                      >
+                        <el-select
+                          v-model="postForm.customerId"
+                          placeholder=""
+                          clearable
+                          filterable
+                          class="filter-item"
+                          style=" width: 100%"
+
+                        >
+                          <el-option
+                            v-for="item in customers"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                          />
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </div>
+              </div>
+              <div>
+                <div>
+                  <div class="postInfo-container">
+                    <el-row>
+                      <el-col :xs="24" :sm="12" :lg="10" :span="6">
+                        <el-form-item
+                          label="拜访类型："
+                          prop="visitType"
+                          label-width="180px"
+                          class="postInfo-container-item"
+                          :rules="{required: true, message: '选择拜访类型', trigger: 'blur'}"
+                        >
+                          <el-select clearable style="width: 100%" v-model="postForm.visitType" placeholder="拜访类型">
+                            <el-option key="0" label="初访" value="初访"/>
+                            <el-option key="1" label="回访" value="回访"/>
+                          </el-select>
+                        </el-form-item>
+                      </el-col>
+                    </el-row>
+                  </div>
+                </div>
+                <div>
+                  <div class="postInfo-container">
+                    <el-row>
+                      <el-col :xs="24" :sm="12" :lg="10" :span="6">
+                        <el-form-item
+                          label="拜访时间："
+                          prop="visitTime"
+                          :rules="{required: true, message: '请选择时间', trigger: 'blur'}"
+                          label-width="180px"
+                          class="postInfo-container-item"
+                        >
+                          <el-date-picker
+                            v-model="postForm.visitTime"
+                            type="datetime"
+                            value-format="yyyy-MM-dd HH:mm:ss"
+                            style="width: 100%"
+                            placeholder="选择时间"
+                          />
+                        </el-form-item>
+                      </el-col>
+                    </el-row>
+                  </div>
+                </div>
+                <div>
+                  <div class="postInfo-container">
+                    <el-row>
+                      <el-col :xs="24" :sm="12" :lg="10" :span="6">
+                        <el-form-item
+                          label="拜访地点："
+                          prop="spot"
+                          label-width="180px"
+                          class="postInfo-container-item"
+                          :rules="{required: true, message: '请填写拜访地点', trigger: 'blur'}"
+                        >
+                          <el-input v-model="postForm.spot" class="filter-item"/>
+                        </el-form-item>
+                      </el-col>
+                    </el-row>
+                  </div>
+                </div>
+                <div>
+                  <div class="postInfo-container">
+                    <el-row>
+                      <el-col :xs="24" :sm="12" :lg="10" :span="6">
+                        <el-form-item
+                          label="沟通内容："
+                          prop="content"
+                          label-width="180px"
+                          class="postInfo-container-item"
+                        >
+                          <el-input type="textarea" v-model="postForm.content" class="filter-item" placeholder="200字符"/>
+                        </el-form-item>
+                      </el-col>
+                    </el-row>
+                  </div>
+                </div>
+              </div>
+            </el-form>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </y-detail-page-layout>
+  </div>
+</template>
+<script>
+  import Breadcrumb from '@/components/Breadcrumb'
+  import YDetailPageLayout from '@/components/YDetailPageLayout'
+
+  export default {
+    name: 'visitDetail',
+    components: {
+      Breadcrumb,
+      YDetailPageLayout
+    },
+    data() {
+      return {
+        type: 'detail',
+        postForm: {},
+        visitId : this.$route.query.id,
+        activeName: 'first',
+        vLoading: false,
+        listQuery:{},
+        customers:[]
+      }
+    },
+    created() {
+      this.getCustomer();
+      this.getDetail();
+    },
+    methods: {
+      getDetail() {
+        if (this.visitId) {
+          this.$api.visit.detail(this.visitId).then(res => {
+            this.postForm = res.data;
+          });
+        }
+      },
+      getCustomer(){
+        const that = this;
+        that.$api.customer.simpleAll().then(data => {
+          if (data.code === 200) {
+            that.customers = data.data
+          } else {
+            this.$message({
+              type: 'error',
+              message: data.msg
+            })
+          }
+        })
+      },
+      handleCreate() {
+        this.$refs.postForm.validate(valid => {
+          if (valid) {
+            if (this.visitId) {
+              this.$api.visit.edit(Object.assign({}, this.postForm, {
+              })).then(res => {
+                if (res.code === 200) {
+                  this.$notify({
+                    title: '成功',
+                    message: '保存成功',
+                    type: 'success',
+                    duration: 2000
+                  });
+                  const back = this.$route.query.back;
+                  if (back) {
+                    this.$router.push(back)
+                  }
+                  this.initData();
+                  this.vLoading = false
+                }
+              }).catch(() => {
+                this.vLoading = false
+              })
+            } else {
+              this.$api.visit.add(Object.assign({}, this.postForm, {
+              })).then(res => {
+                if (res.code === 200) {
+                  this.$notify({
+                    title: '成功',
+                    message: '新增成功',
+                    type: 'success',
+                    duration: 2000
+                  });
+                  const back = this.$route.query.back;
+                  if (back) {
+                    this.$router.push(back)
+                  }
+                  this.initData();
+                  this.vLoading = false
+                }
+              }).catch(() => {
+                this.vLoading = false
+              })
+            }
+          }
+        })
+      },
+    }
+  }
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/market/visit/list.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="app-container">
+    <div class="title-container">
+      <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
+    </div>
+
+    <y-page-list-layout :page-list="pageData" :page-para="listQuery" :get-page-list="getList">
+      <template slot="left">
+        <PermissionButton
+          menu-code="_views_market_visit_add"
+          class-name="filter-item"
+          type="primary"
+          name
+          size="mini"
+          :page-jump="true"
+          round
+          style="float: left"
+        />
+        <el-input
+          v-model="listQuery.customerName"
+          placeholder="客户名称"
+          clearable
+          style="margin-left: 20px;width: 320px;float: left;">
+        </el-input>
+        <el-select clearable style="margin-left: 20px;width: 200px;float: left;" v-model="listQuery.visitType" placeholder="拜访类型">
+          <el-option key="0" label="初访" value="初访"/>
+          <el-option key="1" label="回访" value="回访"/>
+        </el-select>
+        <el-button
+          class="filter-item"
+          style="margin-left: 10px;float: left;"
+          type="primary"
+          @click="searchList"
+          round
+        >搜索
+        </el-button>
+        <el-button
+          class="filter-item"
+          style="float: left;"
+          round
+          type="warning"
+          @click="resetSearch()"
+        >重置
+        </el-button>
+      </template>
+      <parentTable
+        v-loading="listLoading"
+        :data="pageData.records"
+        slot="table"
+        style="width: 100%;"
+      >
+        <el-table-column label="客户名称" align="center" width="210">
+          <template slot-scope="{row}">
+            <span>{{ row.customerName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="拜访类型" align="center" width="210">
+          <template slot-scope="{row}">
+            <span>{{ row.visitType }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="拜访时间" align="center" width="210">
+          <template slot-scope="{row}">
+            <span>{{ row.visitTime }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="拜访地点" align="center" width="210">
+          <template slot-scope="{row}">
+            <span>{{ row.spot }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="沟通内容" align="center">
+          <template slot-scope="{row}">
+            <span>{{ row.content }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="210">
+          <template slot-scope="{row}">
+            <PermissionButton
+              menu-code="_views_market_visit_detail"
+              class-name="filter-item"
+              name=""
+              type="primary"
+              :page-jump="true"
+              :page-query="{id: row.id}"
+              round
+              size="mini"
+            />
+            <PermissionButton
+              menu-code="_views_market_visit_remove"
+              class-name="filter-item"
+              name=""
+              type="danger"
+              round
+              size="mini"
+              @click="deleteInfo(row.id)"
+            />
+          </template>
+        </el-table-column>
+      </parentTable>
+    </y-page-list-layout>
+  </div>
+</template>
+<script>
+  import YPageListLayout from '@/components/YPageListLayout'
+  import Breadcrumb from '@/components/Breadcrumb'
+  import PermissionButton from '@/components/PermissionButton/PermissionButton'
+
+  export default {
+    name: 'visitList',
+    components: {
+      Breadcrumb,
+      YPageListLayout,
+      PermissionButton,
+    },
+    filters: {
+      statusFilter(status) {
+        const statusMap = {
+          published: 'success',
+          draft: 'info',
+          deleted: 'danger',
+        }
+        return statusMap[status]
+      },
+    },
+    data() {
+      return {
+        isDisable:false,
+        tableKey: 0,
+        pageData: { records: [] },
+        total: 20,
+        listLoading: true,
+        listQuery: {
+          page: 1,
+          size: 10,
+          descs: 'id',
+        },
+        listQueryKey: 'keyword',
+      }
+    },
+    created() {
+      const that = this;
+      that.getList();
+    },
+    methods: {
+      resetSearch() {
+        this.listQuery = {
+          current: 1,
+          size: 10,
+          descs: 'id',
+        }
+        this.getList()
+      },
+      searchList() {
+        // 重置分页
+        this.listQuery.page = 1
+        this.listQuery.size = 10
+        this.getList()
+      },
+      getList() {
+        const that = this
+        this.listLoading = true
+        // console.log(that.listQuery)
+        const key = {}
+        key[this.listQueryKey] = this.listQuery.description
+        this.$api.visit
+          .list(Object.assign({}, that.listQuery, key))
+          .then((res) => {
+            that.pageData = res.data
+            setTimeout(() => {
+              that.listLoading = false
+            }, 200)
+          })
+          .catch(() => {
+            that.listLoading = false
+          })
+      },
+      deleteInfo(id) {
+        const that = this
+        that.$confirm('请确认是否删除该数据?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          center: true
+        }).then(() => {
+          that.$api.visit.delete(id).then(data => {
+            that.loading = false
+            if (data.code === 200) {
+              that.getList()
+            } else {
+              this.$message({
+                type: 'error',
+                message: data.msg
+              })
+            }
+          })
+        }).catch(() => {
+        })
+      }
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .right {
+    flex: 1;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+      color: rgba(51, 51, 51, 1);
+      line-height: 35px;
+      margin-bottom: 8px;
+    }
+
+    .menu-2-box {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+    }
+
+    .menu-2-item {
+      display: flex;
+      align-items: center;
+      color: #656565;
+      font-size: 12px;
+      width: 230px;
+      height: 101px;
+      background: rgb(255, 185, 129);
+      border-radius: 3px;
+      padding-left: 20px;
+      margin-right: 10px;
+      margin-bottom: 10px;
+      cursor: pointer;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+
+      .text {
+        margin-left: 16px;
+      }
+    }
+  }
+</style>