Sfoglia il codice sorgente

Merge branch 'master' of http://39.106.8.246:3003/web/wanda-editer

haojianlong 4 anni fa
parent
commit
09eb5b8e6d

BIN
src/assets/images/t-equipment-hover.png


BIN
src/assets/images/t-equipment.png


BIN
src/assets/images/t-img-hover.png


BIN
src/assets/images/t-img.png


BIN
src/assets/images/t-line-hover.png


BIN
src/assets/images/t-line.png


BIN
src/assets/images/t-papeline-hover.png


BIN
src/assets/images/t-papeline.png


BIN
src/assets/images/t-position-hover.png


BIN
src/assets/images/t-position.png


BIN
src/assets/images/t-select-hover.png


BIN
src/assets/images/t-select.png


BIN
src/assets/images/t-text-hover.png


BIN
src/assets/images/t-text.png


+ 243 - 0
src/components/Modal/Modal.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="p-modal">
+    <transition name="opacityInUiOut">
+      <div class="p-modal-bg" @click="shadeHandle" v-if="show" />
+    </transition>
+    <transition-group name="bounceInUiOut">
+      <!-- 提示弹窗样式 -->
+      <Tip
+        key="tip"
+        v-if="show && mode==='tip'"
+        :title="title"
+        :type="type"
+        @close="$emit('close')"
+      >
+        <template #content>
+          <slot name="content" />
+        </template>
+        <template #handle>
+          <slot name="handle" />
+        </template>
+      </Tip>
+      <!-- 默认弹窗样式 -->
+      <Default
+        key="default"
+        v-if="show && (mode==='default' || mode==='small' || mode==='middle' || mode==='large')"
+        :mode="mode"
+        :title="title"
+        @close="$emit('close')"
+      >
+        <template #default>
+          <!-- @slot html内容 -->
+          <slot name="content" />
+        </template>
+        <template #handle>
+          <slot name="handle" />
+        </template>
+      </Default>
+      <!-- 全屏弹窗样式 -->
+      <Full key="full" v-if="show && mode==='full'" :title="title" @close="$emit('close')">
+        <template #content>
+          <slot name="content" />
+        </template>
+        <template #handle>
+          <slot name="handle" />
+        </template>
+      </Full>
+    </transition-group>
+  </div>
+</template>
+
+<script>
+import Default from "./depend/default";
+import Full from "./depend/full";
+import Tip from "./depend/tip";
+
+export default {
+  name: "Modal",
+  components: {
+    Default,
+    Full,
+    Tip
+  },
+  props: {
+    /**
+     * 模态框显示状态
+     */
+    show: {
+      type: Boolean,
+      default: false,
+      require: true
+    },
+    /**
+     * 模态框标题
+     */
+    title: {
+      type: String,
+      default: "",
+      require: true
+    },
+    /**
+     * 模态框显示模式,【可选值 full-全屏显示 default-(默认值)自适应宽高 small-最小对话框】
+     */
+    mode: {
+      type: String,
+      default: "default"
+    },
+    /**
+     * 最小模态框类型
+     */
+    type: {
+      type: String,
+      default: ""
+    },
+    // 键盘esc事件关闭弹窗
+    esc: {
+      type: Boolean,
+      default: false
+    },
+    // 点击遮罩关闭弹窗
+    shade: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: false, // 确定按钮的loading属性
+      handleShadow: false // 操作区按钮投影
+    };
+  },
+  watch: {
+    show(n, o) {
+      if (n === o) return;
+      if (n) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "auto";
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.esc)
+        document.addEventListener("keyup", this.listenKeyEsc, false);
+    });
+  },
+  methods: {
+    // 点击遮罩关闭弹窗
+    shadeHandle() {
+      if (this.shade) this.$emit("close");
+    },
+    listenKeyEsc(e) {
+      if (!this.esc || e.keyCode !== 27) return;
+      this.$emit("close");
+      document.body.style.overflow = "auto";
+    }
+  },
+  beforeDestroy() {
+    if (this.esc) document.removeEventListener("keyup", this.listenKeyEsc);
+    document.body.style.overflow = "auto";
+  }
+};
+</script>
+
+<style lang="less">
+// @import '../static/stylus/animate/opacityInUiOut.styl'
+// @import '../static/stylus/animate/bounceInUiOut.styl'
+
+.p-modal-bg {
+  position: fixed;
+  left: 0;
+  top: 0;
+  background-color: rgba(100, 108, 115, 0.5);
+  width: 100%;
+  height: 100%;
+  z-index: 5000;
+}
+.p-modal-main {
+  position: fixed;
+  background-color: #fff;
+  z-index: 6000;
+}
+
+.p-modal-main-full {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.p-modal-main-max {
+  top: 60px;
+}
+
+.p-modal-title {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  padding-left: 32px;
+  padding-right: 28px;
+  border-bottom: 1px solid $grey-300;
+  width: 100%;
+  height: 56px;
+  .p-title-text {
+    max-width: calc(100% - 80px);
+    line-height: 55px;
+    color: $grey-900;
+    font-size: 16px;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .p-modal-title-icon {
+    //position absolute
+    //top 0
+    //right 28px
+    display: inline-block;
+    width: 16px;
+    height: 55px;
+    line-height: @height;
+
+    // svg
+    //    {
+    //         vertical-align: middle;
+    //     cursor :pointer;
+
+    //     &:hover
+    //        {
+    //             path
+    //         {
+    //                 fill: $blue-500;
+    //             transition fill .36s;
+    //         }
+    //        }
+    //    }
+  }
+}
+
+.p-modal-content {
+  width: 100%;
+  min-height: 77px;
+  overflow-y: auto;
+}
+
+.p-modal-content-full {
+  max-height: calc(100vh - 56px);
+}
+.p-modal-content-default {
+  max-height: calc(100vh - 252px);
+}
+
+.p-modal-handle {
+  padding: 24px 32px 20px;
+  width: 100%;
+  text-align: right;
+  font-size: 0;
+}
+
+.p-modal-handle-shadow {
+  box-shadow: $box-shadow-top;
+}
+</style>

+ 116 - 0
src/components/Modal/depend/default.vue

@@ -0,0 +1,116 @@
+<template>
+  <div
+    :class="['p-modal-main', 'p-modal-main-not-full', 'p-modal-main-'+mode]"
+    :style="{left: modalMainLeft+'px', top: modalMainTop+'px'}"
+  >
+    <div class="p-modal-title">
+      <section class="p-title-text">{{title}}</section>
+      <i class="p-modal-title-icon">
+        <Close @click="$emit('close')" />
+      </i>
+    </div>
+    <div class="p-modal-content p-modal-content-default" ref="modalContentMain">
+      <slot name="default" />
+    </div>
+    <div :class="['p-modal-handle', handleShadow&&'p-modal-handle-shadow']">
+      <slot name="handle" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Close from "../../static/iconSvg/icon_close.svg";
+
+export default {
+  name: "Default",
+  components: { Close },
+  props: {
+    title: {
+      type: String,
+      default: "",
+      require: true
+    },
+    mode: {
+      type: String,
+      default: "default"
+    }
+  },
+  data() {
+    return {
+      modalMainLeft: 0, // 内容距离左边位置
+      modalMainTop: 120, // 内容距离顶部位置
+      handleShadow: false // 操作区按钮投影
+    };
+  },
+  mounted() {
+    this.countPos();
+    window.addEventListener("resize", this.countPos);
+  },
+  methods: {
+    // 动态计算弹窗
+    countPos() {
+      const bodyWidth = window.innerWidth;
+      const bodyHeight = window.innerHeight;
+      const contentHeight = bodyHeight - 248;
+      this.$nextTick(() => {
+        const mc = this.$refs.modalContentMain;
+        if (!mc) return;
+        const mode = this.mode;
+        let modalContentWidth;
+        switch (mode) {
+          case "small":
+            modalContentWidth = 420;
+            break;
+          case "middle":
+            modalContentWidth = 840;
+            break;
+          case "large":
+            modalContentWidth = 1260;
+            break;
+          case "default":
+            modalContentWidth = 600;
+            break;
+          default:
+            modalContentWidth = 0;
+            break;
+        }
+        const modalContentHeight = mc.clientHeight;
+        this.modalMainLeft = (bodyWidth - modalContentWidth) / 2;
+        const top = (bodyHeight - modalContentHeight - 161) / 2;
+        if (top > 60 && top < 120) this.modalMainTop = top;
+        else if (top <= 60) this.modalMainTop = 60;
+        else this.modalMainTop = 120;
+
+        this.handleShadow = modalContentHeight > contentHeight - 32;
+      });
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.countPos);
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.p-modal-main-not-full {
+  border-radius: 4px;
+}
+
+.p-modal-main-default {
+  width: 600px;
+  min-height: 288px;
+}
+
+.p-modal-main-small {
+  width: 420px;
+  min-height: 206px;
+}
+.p-modal-main-middle {
+  width: 840px;
+  min-height: 648px;
+}
+.p-modal-main-large {
+  width: 1260px;
+  min-height: 400px;
+}
+</style>

+ 52 - 0
src/components/Modal/depend/full.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="p-modal-main p-modal-main-full">
+    <div class="p-modal-title">
+      <div class="p-title-text p-title-full-text">{{title}}</div>
+      <div class="p-left-handle">
+        <slot name="handle" />
+      </div>
+      <i class="p-modal-title-icon">
+        <Close @click="$emit('close')" />
+      </i>
+    </div>
+    <div class="p-modal-content p-modal-content-full">
+      <div class="p-modal-content-main" ref="modalContentMain">
+        <slot name="content" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Close from "../../static/iconSvg/icon_close.svg";
+
+export default {
+  name: "Full",
+  components: { Close },
+  props: {
+    title: {
+      type: String,
+      default: "",
+      require: true
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.p-modal-main-full {
+  width: 100%;
+  .p-title-full-text {
+    width: 50%;
+  }
+  .p-left-handle {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 16px;
+    width: 50%;
+    text-align: right;
+    vertical-align: middle;
+  }
+}
+</style>

+ 63 - 0
src/components/Modal/depend/handle.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="p-modal-handle">
+        <Button type="default" @click="onClose">取消</Button>
+        <Button :type="btnType" @click="onConfirm" :loading="loading">确定</Button>
+    </div>
+</template>
+
+<script>
+    import Button from '../../Button';
+
+    export default {
+        name: 'Handle',
+        components: { Button },
+        props: {
+            iconLoading: {
+                type: Boolean,
+                default: false
+            },
+            type: {
+                type: String,
+                default: ''
+            }
+        },
+        data() {
+            return {
+                loading: false // 确定按钮的loading属性
+            }
+        },
+        computed: {
+            // 确定按钮type属性
+            btnType() {
+                const thisType=this.type;
+                let typeStr='primary';
+                if (thisType) {
+                    if (thisType === 'info') typeStr='primary';
+                    else typeStr='error'
+                }
+                return typeStr;
+            }
+        },
+        watch: {
+            show(n, o) {
+                if (n !== o) {
+                    if (n) {
+                        this.loading=false;
+                    }
+                }
+            }
+        },
+        methods: {
+            onClose() {
+                this.$emit('close');
+            },
+            onConfirm() {
+                if (this.loading) return;
+                if (this.iconLoading) {
+                    this.loading=true;
+                }
+                this.$emit('confirm');
+            }
+        }
+    }
+</script>

+ 81 - 0
src/components/Modal/depend/small.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :class="['p-modal-main', 'p-modal-main-small', type&&'p-modal-main-small-svg']">
+    <section class="p-modal-info-svg" v-if="type">
+      <InfoBlurSvg v-if="type==='info'" />
+      <ErrorRedSvg v-else />
+    </section>
+    <div class="p-modal-title" v-if="title">
+      <section class="p-title-text">{{title}}</section>
+    </div>
+    <div class="p-modal-content">
+      <div class="p-modal-content-main" ref="modalContentMain">
+        <slot name="content" />
+      </div>
+    </div>
+    <slot name="handle" />
+  </div>
+</template>
+
+<script>
+import InfoBlurSvg from "../../static/iconSvg/info_blue.svg";
+import ErrorRedSvg from "../../static/iconSvg/error_red.svg";
+
+export default {
+  name: "Small",
+  components: { InfoBlurSvg, ErrorRedSvg },
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    type: {
+      type: String,
+      default: ""
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.p-modal-main-small {
+  top: 120px;
+  left: 50%;
+  margin-left: -210px;
+  border-radius: 4px;
+  width: 420px;
+  .p-modal-info-svg {
+    width: 24px;
+    height: 24px;
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .p-modal-title {
+    border: 0;
+    height: 40px;
+  }
+
+  .p-modal-content {
+    min-height: auto;
+  }
+}
+
+.p-modal-main-small-svg {
+  position: relative;
+  .p-modal-info-svg {
+    position: absolute;
+    top: 24px;
+    left: 32px;
+  }
+
+  .p-modal-title {
+    padding-top: 8px;
+    padding-left: 72px;
+  }
+  .p-modal-content {
+    padding-left: 72px;
+  }
+}
+</style>

+ 93 - 0
src/components/Modal/depend/tip.vue

@@ -0,0 +1,93 @@
+<template>
+  <div :class="['p-modal-main', 'p-modal-main-tip', type&&'p-modal-main-tip-svg']">
+    <section class="p-modal-info-svg" v-if="type">
+      <InfoBlurSvg v-if="type==='info'" />
+      <ErrorRedSvg v-else />
+    </section>
+    <div class="p-modal-title" v-if="title">
+      <section class="p-title-text">{{title}}</section>
+    </div>
+    <div class="p-modal-content">
+      <div class="p-modal-content-main">
+        <section
+          :class="['p-modal-content-main-text', title&&'p-modal-content-main-text-has-title']"
+        >
+          <slot name="content" />
+        </section>
+      </div>
+    </div>
+    <div class="p-modal-handle">
+      <slot name="handle" />
+    </div>
+  </div>
+</template>
+
+<script>
+import InfoBlurSvg from "./../info_blue.svg";
+import ErrorRedSvg from "../../static/iconSvg/error_red.svg";
+
+export default {
+  name: "Tip",
+  components: { InfoBlurSvg, ErrorRedSvg },
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    type: {
+      type: String,
+      default: ""
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.p-modal-main-tip {
+  top: 120px;
+  left: 50%;
+  margin-left: -210px;
+  border-radius: 4px;
+  width: 420px;
+  .p-modal-info-svg {
+    width: 24px;
+    height: 24px;
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  .p-modal-title {
+    border: 0;
+  }
+  .p-modal-content {
+    min-height: auto;
+    .p-modal-content-main-text {
+      margin-top: 24px;
+      font-size: 14px;
+      color: $grey-900;
+      line-height: 22px;
+    }
+    .p-modal-content-main-text-has-title {
+      margin-top: 8px;
+      color: $grey-600;
+    }
+  }
+}
+
+.p-modal-main-tip-svg {
+  position: relative;
+  .p-modal-info-svg {
+    position: absolute;
+    top: 24px;
+    left: 32px;
+  }
+  .p-modal-title {
+    padding-top: 8px;
+    padding-left: 72px;
+  }
+  .p-modal-content {
+    padding-left: 72px;
+  }
+}
+</style>

File diff suppressed because it is too large
+ 9 - 0
src/components/Modal/error_red.svg


+ 6 - 0
src/components/Modal/icon_close.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g transform="translate(8.000000, -9.000000)">
+        <path transform="rotate(45.000000)" d="M11.3849873,11.346892 L11.3849873,3.72784442 L12.9087968,3.72784442 L12.9087968,11.346892 L20.5278444,11.346892 L20.5278444,12.8707016 L12.9087968,12.8707016 L12.9087968,20.4897492 L11.3849873,20.4897492 L11.3849873,12.8707016 L3.76593965,12.8707016 L3.76593965,11.346892 L11.3849873,11.346892 Z" fill="#9CA2A9"></path>
+    </g>
+</svg>

File diff suppressed because it is too large
+ 7 - 0
src/components/Modal/info_blue.svg


+ 105 - 41
src/components/edit/left_toolbar.vue

@@ -1,36 +1,20 @@
 <template>
   <div id="left_toolbar">
     <ul class="list-1">
-      <li>
+      <li
+        v-on:mouseout="mouseoutActive(item)"
+        v-on:mouseover="mouseoverActive(item)"
+        v-for="(item,i) in baseChoice"
+        :key="i"
+      >
         <div class="item">
-          <img src="./../../assets/images/t-select.png" alt />
-        </div>
-      </li>
-      <li>
-        <div class="item">
-          <img src="./../../assets/images/t-select.png" alt />
-        </div>
-        <div class="tooltip">
-          <a-card style="width: 300px">
-            <p>Card content</p>
-            <p>Card content</p>
-            <p>Card content</p>
-          </a-card>
-        </div>
-      </li>
-      <li>
-        <div class="item">
-          <img src="./../../assets/images/t-select.png" alt />
-        </div>
-      </li>
-      <li>
-        <div class="item">
-          <img src="./../../assets/images/t-select.png" alt />
+          <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
+          <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
         </div>
       </li>
     </ul>
     <ul class="list-2">
-      <li>
+      <!-- <li>
         <div class="item">
           <a-icon type="team" />
           <div>消防系统</div>
@@ -42,25 +26,19 @@
             <p>Card content</p>
           </a-card>
         </div>
-      </li>
-      <li>
+      </li>-->
+      <li
+        v-on:mouseout="mouseoutActive(item)"
+        v-on:mouseover="mouseoverActive(item)"
+        v-for="(item,i) in systemChoice"
+        :key="i"
+      >
         <div class="item">
-          <a-icon type="team" />
+          <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
+          <img v-show="item.isHover" :src="require(`./../../assets/images/${item.hoverImg}`)" alt />
           <div>弱电系统</div>
         </div>
       </li>
-      <li>
-        <div class="item">
-          <a-icon type="team" />
-          <div>暖通系统</div>
-        </div>
-      </li>
-      <li>
-        <div class="item">
-          <a-icon type="team" />
-          <div>电梯系统</div>
-        </div>
-      </li>
     </ul>
     <div class="bottom-item">
       <a-icon type="ellipsis" />
@@ -68,6 +46,71 @@
     </div>
   </div>
 </template>
+<script>
+export default {
+  data() {
+    return {
+      // 基础选择
+      baseChoice: [
+        {
+          img: "t-select.png", //logo
+          hoverImg: "t-select-hover.png", //hoverlogo
+          isHover: false, //是否hover
+          name: "选择" //类型
+        },
+        {
+          img: "t-line.png", //logo
+          hoverImg: "t-line-hover.png", //hoverlogo
+          isHover: false, //是否hover
+          name: "画线" //类型
+        },
+        {
+          img: "t-text.png", //logo
+          hoverImg: "t-text-hover.png", //hoverlogo
+          isHover: false, //是否hover
+          name: "画文字" //类型
+        },
+        {
+          img: "t-img.png", //logo
+          hoverImg: "t-img-hover.png", //hoverlogo
+          isHover: false, //是否hover
+          name: "画图片" //类型
+        }
+      ],
+      // 系统选择
+      systemChoice: [
+        {
+          img: "t-position.png", //logo
+          hoverImg: "t-position-hover.png", //hoverlogo
+          isHover: false, //是否hover
+          name: "位置区域" //类型
+        },
+        {
+          img: "t-equipment.png", //logo
+          hoverImg: "t-equipment-hover.png", //hoverlogo
+          isHover: false, //是否hover
+          name: "设备设施" //类型
+        },
+        {
+          img: "t-papeline.png", //logo
+          hoverImg: "t-papeline-hover.png", //hoverlogo
+          isHover: false, //是否hover
+          name: "管线桥架" //类型
+        }
+      ]
+    };
+  },
+  methods: {
+    // 触入
+    mouseoverActive(item) {
+      item.isHover = true;
+    },
+    mouseoutActive(item) {
+      item.isHover = false;
+    }
+  }
+};
+</script>
 <style lang="less">
 #left_toolbar {
   width: 68px;
@@ -101,6 +144,11 @@
         flex-direction: column;
         position: relative;
         cursor: pointer;
+        font-size: 12px;
+        img {
+          width: 25px;
+          height: 25px;
+        }
       }
       &:hover {
         background: #e1f2ff;
@@ -128,16 +176,24 @@
       position: relative;
       .item {
         margin: 0 auto;
+        height: 54px;
         display: flex;
         flex-direction: column;
         position: relative;
         cursor: pointer;
+        align-items: center;
+        font-size: 12px;
+        img {
+          width: 25px;
+          height: 25px;
+          margin-top: 6px;
+        }
       }
       &:hover {
         background: #e1f2ff;
         border-radius: 8px;
         opacity: 0.89;
-        color: #fff;
+        color: #0091ff;
       }
       .tooltip {
         position: absolute;
@@ -151,6 +207,7 @@
     font-size: 18px;
     width: 100%;
     bottom: 12px;
+    height: 54px;
     left: 0;
     display: flex;
     align-items: center;
@@ -160,6 +217,13 @@
     span {
       font-size: 12px;
     }
+    &:hover {
+      background: #e1f2ff;
+      border-radius: 8px;
+      opacity: 0.89;
+      color: #0091ff;
+      height: 54px;
+    }
   }
 }
 </style>

+ 12 - 4
src/components/edit/right_toolbar.vue

@@ -9,12 +9,17 @@
           </ul>
           <ul class="position">
             <li v-for="i in 5" :key="i">
-              <a-input size="small" placeholder="" suffix="x"/>
+              <a-input size="small" placeholder suffix="x" />
             </li>
           </ul>
         </div>
       </a-tab-pane>
-      <a-tab-pane key="2" tab="元素" force-render>Content of Tab Pane 2</a-tab-pane>
+      <a-tab-pane key="2" tab="元素" force-render>
+        <div class="element">
+          <a-input-search placeholder="input search text" @search="onSearch" />
+          <ul class="element-"></ul>
+        </div>
+      </a-tab-pane>
     </a-tabs>
   </div>
 </template>
@@ -39,7 +44,7 @@ li {
 }
 #right_toolbar {
   width: 280px;
-  height: 708px;
+  height: 100%;
   background: rgba(255, 255, 255, 1);
   box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.11);
   .property {
@@ -67,9 +72,12 @@ li {
       li {
         margin-top: 10px;
         width: 30%;
-        margin-right: 8px
+        margin-right: 8px;
       }
     }
   }
+  .element {
+    margin: 0 12px 0 12px;
+  }
 }
 </style>

+ 0 - 1
src/views/editer.vue

@@ -55,7 +55,6 @@ export default {
       flex: 1;
     }
     .right_toolbar {
-      width: 336px;
       height: 100%;
       background: #fff;
     }