楼层装修新特征

manager/public/config.js

@@ -7,6 +7,7 @@ var BASE = {
       buyer: "https://buyer-api.pickmall.cn",
       seller: "https://store-api.pickmall.cn",
       manager: "https://admin-api.pickmall.cn"
+      // manager: "http://admin-api.pickmall.cn:18889"
     },
     API_PROD: {
       common: "https://common-api.pickmall.cn",

manager/src/styles/common.scss

@@ -13,7 +13,7 @@
   border-radius: 1em;
   background-color: rgba(50,50,50,.1);
 }
-.ivu-table table{ 
+.ivu-table table{
   width: 100%!important;
 }
 
@@ -99,4 +99,30 @@ $theme_color: #FF5C58;
 }
 $bg_color: #f1f6fa;
 
-@import "./table-common.scss";
+.wes {
+  /* 多出部分用省略号表示 , 用于一行 */
+  overflow: hidden;
+  word-wrap: normal;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.wes-2 {
+  /* 适用于webkit内核和移动端 */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.wes-3 {
+  /* 适用于webkit内核和移动端 */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
+
+
+@import "./table-common.scss";

manager/src/views/page-decoration/modelConfig.js

@@ -300,6 +300,25 @@ export const modelData = [{
       ]
     },
   },
+  {
+    type: 'seckill-only-album',
+    name: '促销活动-图片版',
+    icon: 'md-image',
+    showName: '',
+    options: {
+      list: [{
+        time: 6,
+        goodsList: [{
+          img: require('@/assets/nav/1.jpg'),
+
+          url: ''
+        },
+
+        ]
+      },
+      ]
+    },
+  },
   {
     type: 'discountAdvert',
     name: '折扣广告',
@@ -681,6 +700,67 @@ export const modelData = [{
       size: '1200*自定义'
     },
   },
+  {
+    type: 'oneRowThreeColumns',
+    name: '一行三列',
+    icon: 'md-image',
+    options: {
+      list:[
+        {
+          img: require('@/assets/nav/decorate8.png'),
+          url:"",
+          size:"385*165"
+        },
+        {
+          img: require('@/assets/nav/decorate8.png'),
+          url:"",
+          size:"385*165"
+        },
+        {
+          img: require('@/assets/nav/decorate8.png'),
+          url:"",
+          size:"385*165"
+        },
+      ]
+    },
+  },
+  {
+    type: 'goodsType',
+    name: '商品模块',
+    icon: 'md-image',
+    options: {
+      title:"智能家居",
+      labels:[
+        {
+          label: '音箱',
+          ___index:0,
+
+        },
+        {
+          label: '门锁',
+          ___index:1
+        },
+        {
+          label: '路由器',
+          ___index:2
+        },
+        {
+          label: '智能设备',
+          ___index:3
+        },
+      ],
+      list:[
+        {
+          img: "https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
+          price: "120",
+          title:" 微软 (Microsoft) Xbox 无线控制器/手柄 湛蓝色 | 3.5mm耳机接口蓝牙连接 Xbox主机电脑平板通用",
+          desc:"万家宝藏好店等你来",
+          ___index: 0
+        },
+
+      ]
+    },
+  },
   {
     type: 'notEnough',
     name: '还没逛够',

manager/src/views/page-decoration/modelFormItem.vue

@@ -56,6 +56,10 @@
     <template v-if="element.type == 'seckill'">
       <seckill :data="element"></seckill>
     </template>
+    <!-- 限时秒杀 待完善 -->
+    <template v-if="element.type == 'seckill-only-album'">
+      <seckill-only-album :data="element"></seckill-only-album>
+    </template>
     <!-- 折扣广告 -->
     <template v-if="element.type == 'discountAdvert'">
       <div
@@ -111,6 +115,14 @@
     <template v-if="element.type == 'firstAdvert'">
       <first-page-advert :data="element"></first-page-advert>
     </template>
+    <!-- 商品模块 -->
+    <template v-if="element.type == 'goodsType'">
+      <goodsType :data="element" class="mb_20 width_1200_auto"></goodsType>
+    </template>
+    <!-- 一行三列 -->
+    <template v-if="element.type == 'oneRowThreeColumns'">
+      <oneRowThreeColumns :data="element" class="mb_20 width_1200_auto"></oneRowThreeColumns>
+    </template>
     <!-- 横幅广告 -->
     <template v-if="element.type == 'bannerAdvert'">
       <div class="horizontal-advert setup-content">
@@ -237,8 +249,11 @@ import NewGoodsSort from "./modelList/newGoodsSort.vue";
 import Recommend from "./modelList/recommend.vue";
 import NotEnough from "./modelList/notEnough.vue";
 import Seckill from "./modelList/seckill.vue";
+import goodsType from "./modelList/goodsAndType.vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 
+import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
+import seckillOnlyAlbum from "./modelList/seckill-only-album.vue";
 export default {
   name: "modelFormItem",
   props: ["element", "select", "index", "data"],
@@ -251,7 +266,10 @@ export default {
     FirstPageAdvert,
     NotEnough,
     Seckill,
+    goodsType,
     ossManage,
+    oneRowThreeColumns,
+    "seckill-only-album":seckillOnlyAlbum
   },
   data() {
     return {

manager/src/views/page-decoration/modelList/goodsAndType.vue

@@ -0,0 +1,253 @@
+<template>
+    <div class="goods-type-wrapper">
+      <div class="flex goods-type-line">
+          <div class="goods-type-title">{{data.options.title}}</div>
+          <div class="flex goods-type-labels">
+            <div :class="{'active':current === index}" class="goods-type-item" v-for="(item,index) in data.options.labels" :key="index">
+              {{item.label}}
+            </div>
+          </div>
+      </div>
+      <!-- 商品部分 -->
+      <div class="goods-list">
+          <div class="goods-list-item" v-for="(item,index) in data.options.list" :key="index">
+              <div class="goods-img">
+                <img :src="item.img">
+              </div>
+              <div>
+                <div class="goods-name wes-2">{{item.title}}</div>
+                <div class="goods-desc">{{item.desc}}</div>
+
+              </div>
+              <div class="goods-price">
+                {{item.price | unitPrice("￥")}}
+              </div>
+          </div>
+
+      </div>
+      <div class="setup-box">
+        <div>
+          <Button
+            size="small"
+            @click.stop="handleSelectModel(data.options.list)"
+          >编辑</Button
+          >
+        </div>
+      </div>
+      <Modal
+        v-model="showModal"
+        title="装修"
+        draggable
+        width="800"
+        :z-index="100"
+        :mask-closable="false"
+      >
+        <div class="modal-tab-bar">
+
+          <Tabs type="card" :draggable="true" @on-drag-drop="handleDragDrop">
+            <TabPane v-for="(tab, index) in data.options.labels" :key="index" :label="tab.label" :name="index">
+              
+            </TabPane>
+          </Tabs>
+
+          <div v-for="(item,index) in data.options.list" :key="index">
+            <img :src="item.img" class="column-img">
+
+            <Button
+              size="small"
+              class="ml_10"
+              type="primary"
+              @click="handleSelectImg(index)"
+            >选择图片</Button
+            >
+            <Button
+              size="small"
+              class="ml_10"
+              type="primary"
+              @click="handleSelectLink(index)"
+            >选择链接</Button
+            >
+          </div>
+
+        </div>
+      </Modal>
+
+
+      <!-- 选择商品。链接 -->
+      <liliDialog
+        ref="liliDialog"
+        @selectedLink="selectedLink"
+        @selectedGoodsData="selectedGoodsData"
+      ></liliDialog>
+      <!-- 选择图片 -->
+      <Modal width="1200px" v-model="picModelFlag" footer-hide>
+        <ossManage
+          @callback="callbackSelected"
+          :isComponent="true"
+          ref="ossManage"
+        />
+      </Modal>
+    </div>
+</template>
+
+<script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+export default {
+  name: "goods",
+  components:{ossManage},
+  props: {
+    data: {
+      type: Object,
+      default: {}
+    }
+  },
+  data(){
+    return{
+      current:0,
+      showModal:false,
+      selected: {}, // 已选数据
+      picModelFlag:false,
+    }
+  },
+  methods:{
+    handleDragDrop (name, newName, a, b, names) {
+      // names 为调整后的 name 集合
+      this.data.options.labels.splice(b,1,...this.data.options.labels.splice(a, 1 , this.data.options.labels[b]));
+    },
+    // 回显图片
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.selected[this.current].img = val.url;
+      console.log(this.selected)
+    },
+    // 编辑模块
+    handleSelectModel(item) {
+      console.log(item)
+      this.selected = item;
+      this.showModal = true;
+
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      console.log(val);
+      let goods = val[0];
+      this.selected.img = goods.thumbnail;
+      this.selected.price = goods.price;
+      this.selected.name = goods.goodsName;
+      this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      this.selected.url = this.$options.filters.formatLinkType(val);
+      this.selected.type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
+    },
+    handleSelectLink(index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+      this.current = index;
+    },
+    handleSelectImg(index){
+      // 选择图片
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+      this.current = index;
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+.goods-type-wrapper{
+  position: relative;
+  &:hover{
+    >.setup-box{
+      display: block;
+    }
+  }
+}
+.column-img{
+  width: 100px;
+  height: 100px;
+}
+.goods-list-item{
+  width: 287px;
+  height: 343.7px;
+  border-radius: 9.8px;
+  opacity: 1;
+  cursor: pointer;
+  background: #FFFFFF;
+  transition: 0.35s;
+  box-shadow: 0px 1px 13px 0px #E5E5E5;
+  &:hover{
+    box-shadow: 0px 1px 14px 0px #C5C5C5;
+  }
+}
+.goods-img{
+  text-align: center;
+  >img{
+    width: auto;
+    max-height: 183px;
+  }
+}
+.goods-name{
+  font-size: 18px;
+
+  font-weight: normal;
+  line-height: 22px;
+  text-align: center;
+  letter-spacing: 0px;
+  width: 200px;
+  margin: 0 auto 12.4px auto;
+  color: #333333;
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-desc{
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 17px;
+  text-align: center;
+  letter-spacing: 0px;
+  margin-bottom: 12.4px;
+  color: #666666;
+
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-price{
+  font-size: 25.2px;
+  font-weight: normal;
+  line-height: 30px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #F31947;
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-type-line{
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+}
+.goods-type-title{
+  font-size: 31px;
+  font-weight: normal;
+  line-height: 37px;
+  letter-spacing: 0px;
+
+  color: #333333;
+}
+.active{
+  color: #F31947;
+}
+.goods-type-labels{
+  font-size: 21px;
+  font-weight: normal;
+  line-height: 25px;
+  letter-spacing: 0px;
+
+}
+.goods-type-item{
+  margin-left: 28px;
+}
+</style>

manager/src/views/page-decoration/modelList/oneRowThreeColumns.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="line flex flex-j-sb">
+    <div class="column" v-for="(item,index) in data.options.list" :key="index">
+      <div v-if="!item.img" class="placeholder">占位符</div>
+      <img v-else :src="item.img" class="three-column-img">
+    </div>
+    <div class="setup-box">
+      <div>
+        <Button
+          size="small"
+          @click.stop="handleSelectModel(data.options.list)"
+        >编辑</Button
+        >
+      </div>
+    </div>
+    <Modal
+      v-model="showModal"
+      title="装修"
+      draggable
+      width="800"
+      :z-index="100"
+      :mask-closable="false"
+    >
+      <div class="modal-tab-bar">
+        <div v-for="(item,index) in data.options.list" :key="index">
+          <img :src="item.img" class="three-column-img">
+          <div>推荐尺寸：{{item.size}}</div>
+          <Button
+            size="small"
+            class="ml_10"
+            type="primary"
+            @click="handleSelectImg(index)"
+          >选择图片</Button
+          >
+          <Button
+            size="small"
+            class="ml_10"
+            type="primary"
+            @click="handleSelectLink(index)"
+          >选择链接</Button
+          >
+        </div>
+
+      </div>
+    </Modal>
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+    <!-- 选择图片 -->
+    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+      <ossManage
+        @callback="callbackSelected"
+        :isComponent="true"
+        ref="ossManage"
+      />
+    </Modal>
+  </div>
+</template>
+
+<script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+export default {
+  name: "oneRowThreeColumns",
+  components:{ossManage},
+  props: {
+    data: {
+      type: Object,
+      default: {}
+    }
+  },
+  data () {
+    return {
+      showModal:false,
+      selected: {}, // 已选数据
+      picModelFlag:false,
+      current:0,
+    };
+  },
+  methods: {
+    // 回显图片
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.selected[this.current].img = val.url;
+      console.log(this.selected)
+    },
+    // 编辑模块
+    handleSelectModel(item) {
+      this.selected = item;
+      this.showModal = true;
+
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      console.log(val);
+      let goods = val[0];
+      this.selected.img = goods.thumbnail;
+      this.selected.price = goods.price;
+      this.selected.name = goods.goodsName;
+      this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      this.selected.url = this.$options.filters.formatLinkType(val);
+      this.selected.type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
+    },
+    handleSelectLink(index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+      this.current = index;
+    },
+    handleSelectImg(index){
+      // 选择图片
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+      this.current = index;
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+.three-column-img{
+  width:385px;
+  height: 165px
+}
+.line:hover{
+  >.setup-box{
+    display: block;
+  }
+}
+.placeholder{
+  background: #666;
+  width: 100%;
+  height: 100%;
+}
+.line{
+  position: relative;
+  justify-content: space-between;
+}
+.column{
+  width: 385px;
+  height: 165px;
+
+  >img{
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

manager/src/views/page-decoration/modelList/seckill-only-album.vue

@@ -0,0 +1,291 @@
+<template>
+  <div class="seckill">
+    <div class="desc">秒杀商品需要在促销活动中添加商品，有商品时才会在首页展示</div>
+    <div class="aside">
+      <div class="title">{{ actName }}</div>
+      <div class="hour">
+        <span>{{ currHour }}:00</span>点场 倒计时
+      </div>
+      <div class="count-down" v-if="actStatus === 1">
+        <span>{{ hours }}</span
+        ><span>{{ minutes }}</span
+      ><span>{{ seconds }}</span>
+      </div>
+      <div class="act-status" v-else>
+        {{ actStatus == 0 ? "未开始" : "已结束" }}
+      </div>
+    </div>
+    <div class="section">
+      <swiper ref="mySwiper" :options="swiperOptions">
+        <swiper-slide
+          v-for="(item, index) in options.list[0].goodsList"
+          :key="index"
+        >
+          <div class="content">
+            <img :src="item.img" width="140" height="140" :alt="item.name" />
+            <div class="ellipsis">{{ item.name }}</div>
+            <div>
+              <span>{{ item.price | unitPrice("￥") }}</span>
+              <span>{{ item.originalPrice | unitPrice("￥") }}</span>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
+  </div>
+</template>
+<script>
+import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
+import "swiper/swiper-bundle.css";
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  directives: {
+    swiper: directive,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      options: this.data.options, // 当前数据
+      actStatus: 0, // 0 未开始  1 进行中   2 已结束
+      actName: "限时秒杀",
+      currHour: "00", // 当前秒杀场
+      diffSeconds: 0, // 倒地时
+      hours: "00", // 小时
+      minutes: "00", // 分钟
+      seconds: "00", // 秒
+      interval: undefined, // 定时器
+      swiperOptions: {
+        // 轮播图参数
+        slidesPerView: 5,
+        autoplay: true,
+        loop: true,
+      },
+    };
+  },
+  watch: {
+    diffSeconds(val) {
+      const hours = Math.floor(val / 3600);
+      // 当前秒数 / 60，向下取整
+      // 获取到所有分钟数 3600 / 60 = 60分钟
+      // 对60取模，超过小时数的分钟数
+      const minutes = Math.floor(val / 60) % 60;
+      // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
+      const seconds = val % 60;
+      this.hours = hours < 10 ? "0" + hours : hours;
+      this.minutes = minutes < 10 ? "0" + minutes : minutes;
+      this.seconds = seconds < 10 ? "0" + seconds : seconds;
+
+      if (val === 0) {
+        clearInterval(this.interval);
+        this.hours = 0;
+        this.minutes = 0;
+        this.seconds = 0;
+        this.countDown(this.options.list);
+      }
+    },
+  },
+  mounted() {
+    this.countDown(this.options.list);
+  },
+  beforeDestroy() {
+    clearInterval(this.interval);
+  },
+  methods: {
+    // 倒计时
+    countDown(list) {
+      /**
+       * 默认倒计时两小时
+       * 如果没有开始，则显示未开始
+       * 进行中显示倒计时
+       * 今天的秒杀结束则显示已结束
+       */
+      let nowHour = new Date().getHours();
+      if (nowHour < Number(list[0].time)) {
+        // 活动未开始
+        this.currHour = list[0].time;
+        this.actStatus = 0;
+      } else if (nowHour >= Number(list[list.length - 1].time + 2)) {
+        // 活动已结束
+        this.actStatus = 2;
+        this.currHour = list[list.length - 1].time;
+      } else {
+        // 活动进行中
+        this.actStatus = 1;
+        for (let i = 0; i < list.length; i++) {
+          if (nowHour == Number(list[i].time)) {
+            this.currHour = list[i].time;
+          }
+          if (
+            nowHour > Number(list[i].time) &&
+            nowHour < Number(list[i].time + 2)
+          ) {
+            this.currHour = list[i].time;
+          }
+        }
+        // 当前0点时间戳
+        let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
+        // 活动倒计时
+        this.diffSeconds = Math.floor(
+          (zeroTime +
+            3600 * 1000 * (this.currHour + 2) -
+            new Date().getTime()) /
+          1000
+        );
+        const that = this;
+        this.interval = setInterval(() => {
+          this.diffSeconds--;
+        }, 1000);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.seckill {
+  width: 100%;
+  height: 260px;
+  display: flex;
+  position: relative;
+  .desc{
+    position: absolute;
+    color: $theme_color;
+    left: 200px;
+    top: 5px;
+  }
+  .aside {
+    overflow: hidden;
+    width: 190px;
+    height: 100%;
+    color: #fff;
+    background-image: url("../../../assets/seckillBg.png");
+
+    .title {
+      width: 100%;
+      text-align: center;
+      font-size: 28px;
+      margin-top: 31px;
+    }
+
+    .hour {
+      margin-top: 90px;
+      text-align: center;
+      span {
+        font-size: 18px;
+      }
+    }
+
+    .count-down {
+      margin: 10px 0 0 30px;
+      > span {
+        position: relative;
+        float: left;
+        width: 30px;
+        height: 30px;
+        text-align: center;
+        background-color: #2f3430;
+        margin-right: 20px;
+        color: white;
+        font-size: 20px;
+        &::after {
+          content: ":";
+          display: block;
+          position: absolute;
+          right: -20px;
+          font-weight: bolder;
+          font-size: 18px;
+          width: 20px;
+          height: 100%;
+          top: 0;
+        }
+      }
+      > span:last-child::after {
+        content: "";
+      }
+    }
+
+    .act-status {
+      margin: 10px 0 0 65px;
+      font-size: 20px;
+    }
+  }
+
+  .section {
+    width: 1000px;
+    // background: #efefef;
+    .swiper-slide {
+      height: 260px;
+      .content {
+        width: 200px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        position: relative;
+        &::after {
+          content: "";
+          display: block;
+          position: absolute;
+          top: 50%;
+          right: 0;
+          width: 1px;
+          height: 200px;
+          transform: translateY(-50%);
+          background: linear-gradient(180deg, white, #eeeeee, white);
+        }
+        img {
+          margin-top: 30px;
+        }
+        > div {
+          width: 160px;
+          margin-top: 10px;
+          font-size: 12px;
+          position: relative;
+        }
+        > div:nth-of-type(1):hover {
+          color: $theme_color;
+          cursor: pointer;
+        }
+        > div:nth-of-type(2) {
+          border: 1px solid $theme_color;
+          line-height: 24px;
+          display: flex;
+          text-align: center;
+
+          span:nth-child(1) {
+            color: #fff;
+            font-size: 16px;
+            width: 92px;
+            background-color: $theme_color;
+            position: relative;
+            &::before {
+              content: " ";
+              width: 0;
+              height: 0;
+              border-color: transparent white transparent transparent;
+              border-style: solid;
+              border-width: 24px 8px 0 0;
+              position: absolute;
+              top: 0;
+              left: 84px;
+            }
+          }
+
+          span:nth-child(2) {
+            color: #999;
+            width: 66px;
+            text-decoration: line-through;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

manager/src/views/page-decoration/renovation.vue

@@ -49,7 +49,7 @@ export default {
     // 提交模板
     submitTemplate(pageShow) {
       this.submitLoading = true
-      const modelForm = JSON.parse(JSON.stringify(this.modelForm)) 
+      const modelForm = JSON.parse(JSON.stringify(this.modelForm))
       modelForm.list.unshift(this.$refs.modelForm.navList);
       modelForm.list.unshift(this.$refs.modelForm.topAdvert);
       const data = {
@@ -107,7 +107,7 @@ export default {
   display: flex;
 }
 .model-list {
-  width: 120px;
+  width: 130px;
   height: auto;
   padding: 10px;
   background: #fff;
@@ -121,17 +121,21 @@ export default {
     line-height: 30px;
   }
   .model-item {
-    width: 100px;
+    width: 110px;
     height: 30px;
     background: #eee;
     margin-top: 10px;
     line-height: 30px;
     text-align: center;
     color: #999;
+    transition:0.15s;
+    border-radius: 4px;
     &:hover {
-      border: 1px dashed #409eff;
-      color: #409eff;
+
+      background: $theme_color;
       cursor: move;
+      color: #fff;
+
     }
   }
   .ghost::after {