From af957bcbb66e502c14fe29a794a824ffd844a920 Mon Sep 17 00:00:00 2001
From: revive <1664535558@qq.com>
Date: Wed, 27 Jan 2021 14:40:20 +0800
Subject: [PATCH] commit

---
 src/router.js                                 |   2 +-
 .../workspace/components/file-milestone.vue   | 203 +++++++++
 .../workspace/components/version-item.vue     | 395 ++----------------
 .../main_web/workspace/components/version.vue | 383 +++++++++++++++++
 4 files changed, 614 insertions(+), 369 deletions(-)
 create mode 100644 src/views/main_web/workspace/components/file-milestone.vue
 create mode 100644 src/views/main_web/workspace/components/version.vue

diff --git a/src/router.js b/src/router.js
index a3562741..c9d8aeb2 100644
--- a/src/router.js
+++ b/src/router.js
@@ -82,7 +82,7 @@ const router = new Router({
 	{
 		path: '/history',
 		name: 'history',
-		component: () => import('@/views/main_web/workspace/components/file-history'),
+		component: () => import('@/views/main_web/workspace/components/file-milestone'),
 	},
 	{
 		path: '/cloud',
diff --git a/src/views/main_web/workspace/components/file-milestone.vue b/src/views/main_web/workspace/components/file-milestone.vue
new file mode 100644
index 00000000..7baff14a
--- /dev/null
+++ b/src/views/main_web/workspace/components/file-milestone.vue
@@ -0,0 +1,203 @@
+<template>
+  <div class="milestone_panel">
+    <!-- 用户中心弹窗模块 -->
+    <div :class="yiyunAnimated + ' flex_right_pain'">
+      <!-- 历史版本管理 -->
+      <div class="flex_right_pain_body_box">
+        <div class="flex_right_pain_head">
+          <div class="EC_col_12">
+            <h4 class="RdiaheaderTitle">历史版本管理</h4>
+          </div>
+          <div class="EC_col_12">
+            <div class="close-wrap"
+                 :class="{'close-hover': isCloseHover}"
+                @click.stop="closeSetPain" 
+                @mouseenter="isCloseHover = true" 
+                @mouseleave="isCloseHover = false"
+            >
+              <img v-show="!isCloseHover" class="close-icon vert-hori-center" src="/static/img/operate-pop-window/关闭.svg" alt />
+              <img v-show="isCloseHover" class="close-icon vert-hori-center" src="/static/img/operate-pop-window/关闭激活.svg" alt />
+            </div>
+          </div>
+        </div>
+        <div class="pxline"></div>
+        <div class="flex_right_pain_body">
+          <div class="yiyun_app_itemClasss">
+          </div>
+        </div>
+        <div class="bottombtnitem">
+          <div class="bottombtnitemlonBtn">
+            <el-button 
+              type="primary"
+              round
+              class="longBtn defualtBtnInfo quitBtn"
+              @click="checkAllMilestone"
+              >查看所有历史版本</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <!-- 查看所有历史版本 -->
+      <div class="flex_right_pain_body_box" v-if="milestoneCheck">
+        <div class="flex_right_pain_head">
+          <div class="EC_col_4">
+            <i
+              class="el-collapse-item__arrow el-icon-arrow-left left-list_btn"
+              @click.stop="enterMilestoneManage"
+            ></i>
+          </div>
+          <div class="EC_col_16">
+            <h4 class="centertext">所有历史版本</h4>
+          </div>
+          <div class="EC_col_4">
+            <i
+              class="Cicon icon font_family icon-icon_quxiaohuoguanbi fr"
+              title="关闭"
+              @click="closeSetPain"
+            ></i>
+          </div>
+        </div>
+        <div class="pxline"></div>
+        <div class="flex_right_pain_body">
+          <div class="yiyun_app_itemClasss">
+          </div>
+        </div>
+      </div>  
+    </div>
+   
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+  },
+  async mounted() {
+    // const userInfo = await getUserInfo(this.$store.state.accountId);
+    // this.user = userInfo;
+  },
+  data() {
+    return {
+      yiyunAnimated: "", //设置面板默认动画为空  AnimatedRightIn动画右边进入
+      isCloseHover: false,
+      //添加的
+      clickedVersion:'',
+      isFileNameShow:false,
+      remarks:'备注内容，默认显示两行。备注内容，默认显示两行。',
+      isEdit:false,
+      colorList:['#7850FF','#4AE2A6','#FFBE00',
+                  '#3C7DFF','#D6243A','#FF6634',
+                  '#14A3FF','#7DE217'
+                ],//颜色盘
+      selectedColor:'#7850FF',
+      toolboxShow:false,
+      color:'#fff', //标记icon的颜色
+      milestoneManage:true,
+      milestoneCheck:false,
+    };
+  },
+  methods: {
+    //点击某一版本
+    clickVersion(){
+      this.isFileNameShow = true;
+    },
+    //触发input焦点事件
+    editRemarks(){
+      this.isEdit = true;
+    },
+    //完成备注
+    setRemarks(){
+      this.isFileNameShow = false;
+      this.isEdit = false;
+    },
+    //取消备注
+    cancelEdit(){
+
+    },
+    // 查看所有历史版本
+    checkAllMilestone(){
+      this.milestoneManage = false;
+      this.milestoneCheck = true;
+    },
+    //返回历史版本管理
+    enterMilestoneManage(){
+      this.milestoneManage = true;
+      this.milestoneCheck = false;      
+    },
+
+
+    /**
+     * 用户设置面板
+     */
+    openSetPain: function () {
+      this.yiyunAnimated = "AnimatedRightIn";
+    },
+    /**
+     * 关闭
+     */
+    closeSetPain: function () {
+      this.yiyunAnimated = "";
+    },
+    // 打开设置颜色
+    setColor(){
+      this.toolboxShow = true;
+      this.isFileNameShow = true;
+    },
+    // 选择颜色
+    selectColor(color){
+      this.selectedColor = color;
+    },
+    // 关闭设置颜色
+    closeSetColor(){
+      this.toolboxShow = false;
+    },
+    //创建里程碑
+    createMilestone(){
+      this.toolboxShow = false;
+      this.color = this.selectedColor;
+    }
+     
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.icon-gerenshezhi {
+  line-height: inherit;
+}
+.yiyun_yinyongname {
+  line-height: 1.2;
+}
+.milestone_panel .flex_right_pain{
+    right: 30px;
+}
+.milestone_panel .flex_right_pain_body {
+  font-size: 16px;
+  height: calc(100vh - 24px - 16px - 48px - 58px - 6px - 50px) !important;
+}
+.check-for-updates {
+  display: flex;
+  align-items: center;
+}
+/* 关闭弹窗 */
+.close-hover {
+  background-color: #d6243a;
+}
+.close-wrap {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+
+  width: 32px;
+  height: 32px;
+
+  line-height: 32px;
+  text-align: center;
+
+  border-radius: 4px;
+
+  cursor: pointer;
+
+}
+
+</style>
diff --git a/src/views/main_web/workspace/components/version-item.vue b/src/views/main_web/workspace/components/version-item.vue
index d6816a72..421ece91 100644
--- a/src/views/main_web/workspace/components/version-item.vue
+++ b/src/views/main_web/workspace/components/version-item.vue
@@ -1,383 +1,42 @@
 <template>
     <div>
-        <!-- 选择颜色弹窗 -->
-        <div class="toolbox" v-if="toolboxShow">
-            <div class="toolbox_content">
-                <div class="toolbox_top">
-                    <div class="version_icon" :style="{border:`1px solid ${selectedColor}`}">  
-                    </div>
-                    <div class="create_btn" @click="createMilestone">
-                        创建里程碑
-                    </div>
-                    <div class="close_btn" @click.stop="closeSetColor">
-                        <i class="el-icon-close"></i>
-                    </div>
+        <div class="version_item">
+            <div class="content">
+                <div class="content_header">
+                    <p class="version_title">当前协同-版本9</p>
                 </div>
-                <div class="toolbox_bottom">
-                    <div class="colorbox"  @click.stop="selectColor(color)" v-for="(color,index) in colorList" :key="index" :style="{backgroundColor:`${color}`}">
-                        <div class="point" v-if="selectedColor == color"></div>
+                <div class="content_icon">
+                    <div class="icon_box">
+                        <i></i>
+                    </div>
+                    <div class="switch_btn">
+                        <el-switch
+                        v-model="switchValue"
+                        active-color="#7850FF"
+                        inactive-color="#fff">
+                        </el-switch>
                     </div>
                 </div>
-            </div>
-            <div class="triangle-down">
-            </div>
-        </div> 
-        <!-- 历史版本信息 -->
-        <div class="version_item" :class="{version_big : toolboxShow || isNowVersion ||isVersionClick}" @click.stop="clickVersion">  
-            <div class="version_item_icon" @click.stop="setColor" :style="{backgroundColor:`${color}`}">  
-            </div>
-            <div class="content" >
-                <div class="content_header">
-                    <p class="version_title">当前协作-版本9</p>
-                    <p class="content_right">协同于12月12日 下午3:23</p>
-                </div>
-                <div class="content_name" v-if="isVersionClick">
-                    <p>文件名</p>
-                    <p  class="content_right">由备用名创建</p>
+                <div class="version_info">
+
                 </div>
                 <div class="content_remarks" v-if="!isVersionClick">
-                    {{remarks}}
-                </div>
-            </div>  
-            <div class="edit_remarks" v-if="isVersionClick">
-                <el-input v-model="remarks" placeholder="创建备注" @focus="editRemarks" :class="{input_border:isEdit}"></el-input>
-                <div class="select_box" v-if="!isEdit">
-                    <div class="share_btn">设定为协同版本</div>
-                    <div class="look_btn">下载浏览</div>
-                </div>
-                <div class="select_box" v-if="isEdit">
-                    <div class="cancel_btn button">取消</div>
-                    <div class="set_btn button" @click.stop="setRemarks">完成备注</div>
-                </div>
-            </div>                
+                    123
+                </div>                
+            </div>
         </div>
+
     </div>
 </template>
+
 <script>
 export default {
-    props:{
-        isNowVersion:{
-            type:Boolean,
-            default: false,
-        },
-        isCheckMilestone:{
-            type:Boolean,
-            default: false,            
+    data(){
+        return{
+            switchValue:true,
         }
-
-
-    },
-  data() {
-    return {
-      isVersionClick:false,
-      remarks:'备注内容，默认显示两行。备注内容，默认显示两行。',
-      isEdit:false,
-      colorList:['#7850FF','#4AE2A6','#FFBE00',
-                  '#3C7DFF','#D6243A','#FF6634',
-                  '#14A3FF','#7DE217'
-                ],//颜色盘
-      selectedColor:'#7850FF',
-      toolboxShow:false,//选择颜色盘显示 
-      color:'#fff', //标记icon的颜色
-
-    };
-  },
-  methods: {
-    //点击某一版本
-    clickVersion(){
-      if(!this.isNowVersion){
-        this.isVersionClick = true;
-      }
-    },
-    //触发input焦点事件
-    editRemarks(){
-      this.isEdit = true;
-    },
-    //完成备注
-    setRemarks(){
-      this.isFileNameShow = false;
-      this.isEdit = false;
-    },
-    //取消备注
-    cancelEdit(){
-
-    },
-    // 打开设置颜色
-    setColor(){
-      if(this.isCheckMilestone){
-        this.toolboxShow = true;
-        this.isFileNameShow = true;
-      }
-    },
-    // 选择颜色
-    selectColor(color){
-      this.selectedColor = color;
-    },
-    // 关闭设置颜色
-    closeSetColor(){
-      this.toolboxShow = false;
-    },
-    //创建里程碑
-    createMilestone(){
-      this.toolboxShow = false;
-      this.color = this.selectedColor;
-    }
-     
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.icon-gerenshezhi {
-  line-height: inherit;
-}
-.yiyun_yinyongname {
-  line-height: 1.2;
-}
-.milestone_panel .flex_right_pain{
-    right: 30px;
-}
-.milestone_panel .flex_right_pain_body {
-  font-size: 16px;
-  height: calc(100vh - 24px - 16px - 48px - 58px - 6px - 50px) !important;
-}
-.check-for-updates {
-  display: flex;
-  align-items: center;
-}
-.version_item{
-    margin: 8px auto;
-    border-radius: 8px;
-    padding: 8px;
-    box-sizing: border-box;
-    cursor: pointer;
-    transition: all .3s linear;	
-    background-color: gray;
-}
-.version_item{
-  width: 343px;
-  position: relative;
-}
-
-.version_big{
-  width: 359px;
-  box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1), 
-              0px 1px 3px 0px rgba(0, 0, 0, 0.1);
-}
-.edit_remarks {
-  margin-top: 8px;
-  .edit_input{
-    width: 343px;
-    height: 40px;
-  }
-  .select_box{
-    display: flex;
-    padding-top: 8px;
-    justify-content: space-between;
-    .button{
-      width: 167px;
-      height: 24px;
-      line-height: 24px;
-      text-align: center;
-      border-radius: 8px;
-      font-size: 14px;
-    }
-    .share_btn{
-      width: 120px;
-      border: 1px solid rgba(167, 168, 183, 1);
-      text-align: center;
-      border-radius: 8px;
-      font-size: 14px;
-      line-height: 24px;
-    }
-    .share_btn:hover{
-      background: #7850FF;
-      border-color: #7850FF;
-      color: #fff;
-      transition: all ease 0.5s;
-    }
-    .look_btn{
-      font-size: 12px;
-      line-height: 24px;
-      color: rgba(0, 0, 0, 0.56);
-    }
-    .cancel_btn{
-      background-color: rgba(255, 255, 255, 1);
-      border: 0.5px solid rgba(209, 210, 211, 1);      
-    }
-    .set_btn{
-      color:#fff;
-      background-color: #7850FF;
-      border: 0.5px solid #7850FF;
+        
     }
-  }
+    
 }
-.title{
-  width: 100%;
-  padding: 12px 24px;
-  box-sizing: border-box;
-  border-bottom: 1px solid black;
-  font-weight: bold;
-}
-.version_item_icon,.version_icon{
-    width: 20px;
-    height: 20px;
-    background-color: green;
-    border-radius: 6px;
-}
-.version_item_icon{
-    position:absolute;
-}
-
-.content{
-
-    margin-left: 24px;
-    font-size: 11px;
-    cursor: pointer;
-    .content_name{
-       padding-top: 8px;
-     
-    }
-    .content_header{
-      line-height: 20px;
-    }
-    .version_title{
-      font-weight: bold;
-      font-family: PingFangSC-Medium;      
-    }
-    .content_right{
-      margin-left: auto;
-      color: rgba(0, 0, 0, 0.56);
-    }
-    .content_remarks{
-      margin-top: 8px;
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-line-clamp: 2 ;
-      -webkit-box-orient: vertical ;
-      font-size: 14px;
-      text-align: left;
-      font-family: PingFangSC-Regular;
-    }
-}
-.content_header,.content_name{
-  display: flex;
-  justify-content: start;
-}
-.version_now:hover{
-  box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1), 
-              0px 1px 3px 0px rgba(0, 0, 0, 0.1);
-}
-/*选择颜色弹框*/
-.toolbox{
-  width: 359px;
-  height: 74px;
-  margin: 8px auto;
-  .toolbox_content{
-    background-color: #fff;
-    padding: 8px;
-    border-radius: 8px;
-    box-shadow: 0px 12px 21px 2px rgba(0, 0, 0, 0.1), 0px 4px 10px 0px rgba(0, 0, 0, 0.1);    
-    .toolbox_top{
-      display: flex;
-      box-sizing: border-box;
-      justify-content: flex-end;
-      margin-bottom: 12px;
-      .create_btn{
-        width: 100px;
-        line-height: 20px;
-        color: rgba(50, 50, 60, 100);
-        font-size: 14px;
-        text-align: center;
-        border-radius: 6px;
-        box-sizing: border-box;
-        border: 1px solid #8C00FF;
-        cursor: pointer;
-      }
-      .version_icon{
-        margin-right: auto;
-        background-color:#fff;
-      }
-      .close_btn{
-        color: #8C00FF;
-        margin-left: 12px;
-      }
-    }
-  }
-
-}
-.toolbox_bottom{
-  padding-left: 2px;
-  display:flex;
-  .colorbox{
-    width: 16px;
-    text-align: center;
-    height: 16px;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-right: 8px;
-    cursor: pointer;
-    .point{
-      background-color: #fff;
-      border-radius: 50%;
-      width: 5px;
-      height: 5px;
-
-    }
-  }
-}
-.triangle-down{
-    width: 0;
-    height: 0;
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-top: 12px solid #fff;  
-    left: 20px;
-    position: absolute;
-}
-.el-icon-close::before{
-  content: "\e6db" !important;
-}
-/*input边框变紫色 */
-.input_border{
-  border: 1px solid #7850FF;
-
-}
-/* 关闭弹窗 */
-.close-hover {
-  background-color: #d6243a;
-}
-.close-wrap {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-
-  width: 32px;
-  height: 32px;
-
-  line-height: 32px;
-  text-align: center;
-
-  border-radius: 4px;
-
-  cursor: pointer;
-
-}
-
-.fade-btn-enter{
-  opacity: 0;
-}
-.fade-btn-enter-active{
-  transition: all 0.5s ;
-}
-.fade-btn-leave-to{
-  opacity: 0;
-}
-.fade-btn-leave-active{
-  transition: all 0.5s;
-}
-
-
-</style>
\ No newline at end of file
+</script>
diff --git a/src/views/main_web/workspace/components/version.vue b/src/views/main_web/workspace/components/version.vue
new file mode 100644
index 00000000..d6816a72
--- /dev/null
+++ b/src/views/main_web/workspace/components/version.vue
@@ -0,0 +1,383 @@
+<template>
+    <div>
+        <!-- 选择颜色弹窗 -->
+        <div class="toolbox" v-if="toolboxShow">
+            <div class="toolbox_content">
+                <div class="toolbox_top">
+                    <div class="version_icon" :style="{border:`1px solid ${selectedColor}`}">  
+                    </div>
+                    <div class="create_btn" @click="createMilestone">
+                        创建里程碑
+                    </div>
+                    <div class="close_btn" @click.stop="closeSetColor">
+                        <i class="el-icon-close"></i>
+                    </div>
+                </div>
+                <div class="toolbox_bottom">
+                    <div class="colorbox"  @click.stop="selectColor(color)" v-for="(color,index) in colorList" :key="index" :style="{backgroundColor:`${color}`}">
+                        <div class="point" v-if="selectedColor == color"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="triangle-down">
+            </div>
+        </div> 
+        <!-- 历史版本信息 -->
+        <div class="version_item" :class="{version_big : toolboxShow || isNowVersion ||isVersionClick}" @click.stop="clickVersion">  
+            <div class="version_item_icon" @click.stop="setColor" :style="{backgroundColor:`${color}`}">  
+            </div>
+            <div class="content" >
+                <div class="content_header">
+                    <p class="version_title">当前协作-版本9</p>
+                    <p class="content_right">协同于12月12日 下午3:23</p>
+                </div>
+                <div class="content_name" v-if="isVersionClick">
+                    <p>文件名</p>
+                    <p  class="content_right">由备用名创建</p>
+                </div>
+                <div class="content_remarks" v-if="!isVersionClick">
+                    {{remarks}}
+                </div>
+            </div>  
+            <div class="edit_remarks" v-if="isVersionClick">
+                <el-input v-model="remarks" placeholder="创建备注" @focus="editRemarks" :class="{input_border:isEdit}"></el-input>
+                <div class="select_box" v-if="!isEdit">
+                    <div class="share_btn">设定为协同版本</div>
+                    <div class="look_btn">下载浏览</div>
+                </div>
+                <div class="select_box" v-if="isEdit">
+                    <div class="cancel_btn button">取消</div>
+                    <div class="set_btn button" @click.stop="setRemarks">完成备注</div>
+                </div>
+            </div>                
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props:{
+        isNowVersion:{
+            type:Boolean,
+            default: false,
+        },
+        isCheckMilestone:{
+            type:Boolean,
+            default: false,            
+        }
+
+
+    },
+  data() {
+    return {
+      isVersionClick:false,
+      remarks:'备注内容，默认显示两行。备注内容，默认显示两行。',
+      isEdit:false,
+      colorList:['#7850FF','#4AE2A6','#FFBE00',
+                  '#3C7DFF','#D6243A','#FF6634',
+                  '#14A3FF','#7DE217'
+                ],//颜色盘
+      selectedColor:'#7850FF',
+      toolboxShow:false,//选择颜色盘显示 
+      color:'#fff', //标记icon的颜色
+
+    };
+  },
+  methods: {
+    //点击某一版本
+    clickVersion(){
+      if(!this.isNowVersion){
+        this.isVersionClick = true;
+      }
+    },
+    //触发input焦点事件
+    editRemarks(){
+      this.isEdit = true;
+    },
+    //完成备注
+    setRemarks(){
+      this.isFileNameShow = false;
+      this.isEdit = false;
+    },
+    //取消备注
+    cancelEdit(){
+
+    },
+    // 打开设置颜色
+    setColor(){
+      if(this.isCheckMilestone){
+        this.toolboxShow = true;
+        this.isFileNameShow = true;
+      }
+    },
+    // 选择颜色
+    selectColor(color){
+      this.selectedColor = color;
+    },
+    // 关闭设置颜色
+    closeSetColor(){
+      this.toolboxShow = false;
+    },
+    //创建里程碑
+    createMilestone(){
+      this.toolboxShow = false;
+      this.color = this.selectedColor;
+    }
+     
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.icon-gerenshezhi {
+  line-height: inherit;
+}
+.yiyun_yinyongname {
+  line-height: 1.2;
+}
+.milestone_panel .flex_right_pain{
+    right: 30px;
+}
+.milestone_panel .flex_right_pain_body {
+  font-size: 16px;
+  height: calc(100vh - 24px - 16px - 48px - 58px - 6px - 50px) !important;
+}
+.check-for-updates {
+  display: flex;
+  align-items: center;
+}
+.version_item{
+    margin: 8px auto;
+    border-radius: 8px;
+    padding: 8px;
+    box-sizing: border-box;
+    cursor: pointer;
+    transition: all .3s linear;	
+    background-color: gray;
+}
+.version_item{
+  width: 343px;
+  position: relative;
+}
+
+.version_big{
+  width: 359px;
+  box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1), 
+              0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+}
+.edit_remarks {
+  margin-top: 8px;
+  .edit_input{
+    width: 343px;
+    height: 40px;
+  }
+  .select_box{
+    display: flex;
+    padding-top: 8px;
+    justify-content: space-between;
+    .button{
+      width: 167px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      border-radius: 8px;
+      font-size: 14px;
+    }
+    .share_btn{
+      width: 120px;
+      border: 1px solid rgba(167, 168, 183, 1);
+      text-align: center;
+      border-radius: 8px;
+      font-size: 14px;
+      line-height: 24px;
+    }
+    .share_btn:hover{
+      background: #7850FF;
+      border-color: #7850FF;
+      color: #fff;
+      transition: all ease 0.5s;
+    }
+    .look_btn{
+      font-size: 12px;
+      line-height: 24px;
+      color: rgba(0, 0, 0, 0.56);
+    }
+    .cancel_btn{
+      background-color: rgba(255, 255, 255, 1);
+      border: 0.5px solid rgba(209, 210, 211, 1);      
+    }
+    .set_btn{
+      color:#fff;
+      background-color: #7850FF;
+      border: 0.5px solid #7850FF;
+    }
+  }
+}
+.title{
+  width: 100%;
+  padding: 12px 24px;
+  box-sizing: border-box;
+  border-bottom: 1px solid black;
+  font-weight: bold;
+}
+.version_item_icon,.version_icon{
+    width: 20px;
+    height: 20px;
+    background-color: green;
+    border-radius: 6px;
+}
+.version_item_icon{
+    position:absolute;
+}
+
+.content{
+
+    margin-left: 24px;
+    font-size: 11px;
+    cursor: pointer;
+    .content_name{
+       padding-top: 8px;
+     
+    }
+    .content_header{
+      line-height: 20px;
+    }
+    .version_title{
+      font-weight: bold;
+      font-family: PingFangSC-Medium;      
+    }
+    .content_right{
+      margin-left: auto;
+      color: rgba(0, 0, 0, 0.56);
+    }
+    .content_remarks{
+      margin-top: 8px;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 2 ;
+      -webkit-box-orient: vertical ;
+      font-size: 14px;
+      text-align: left;
+      font-family: PingFangSC-Regular;
+    }
+}
+.content_header,.content_name{
+  display: flex;
+  justify-content: start;
+}
+.version_now:hover{
+  box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1), 
+              0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+}
+/*选择颜色弹框*/
+.toolbox{
+  width: 359px;
+  height: 74px;
+  margin: 8px auto;
+  .toolbox_content{
+    background-color: #fff;
+    padding: 8px;
+    border-radius: 8px;
+    box-shadow: 0px 12px 21px 2px rgba(0, 0, 0, 0.1), 0px 4px 10px 0px rgba(0, 0, 0, 0.1);    
+    .toolbox_top{
+      display: flex;
+      box-sizing: border-box;
+      justify-content: flex-end;
+      margin-bottom: 12px;
+      .create_btn{
+        width: 100px;
+        line-height: 20px;
+        color: rgba(50, 50, 60, 100);
+        font-size: 14px;
+        text-align: center;
+        border-radius: 6px;
+        box-sizing: border-box;
+        border: 1px solid #8C00FF;
+        cursor: pointer;
+      }
+      .version_icon{
+        margin-right: auto;
+        background-color:#fff;
+      }
+      .close_btn{
+        color: #8C00FF;
+        margin-left: 12px;
+      }
+    }
+  }
+
+}
+.toolbox_bottom{
+  padding-left: 2px;
+  display:flex;
+  .colorbox{
+    width: 16px;
+    text-align: center;
+    height: 16px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 8px;
+    cursor: pointer;
+    .point{
+      background-color: #fff;
+      border-radius: 50%;
+      width: 5px;
+      height: 5px;
+
+    }
+  }
+}
+.triangle-down{
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 12px solid #fff;  
+    left: 20px;
+    position: absolute;
+}
+.el-icon-close::before{
+  content: "\e6db" !important;
+}
+/*input边框变紫色 */
+.input_border{
+  border: 1px solid #7850FF;
+
+}
+/* 关闭弹窗 */
+.close-hover {
+  background-color: #d6243a;
+}
+.close-wrap {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+
+  width: 32px;
+  height: 32px;
+
+  line-height: 32px;
+  text-align: center;
+
+  border-radius: 4px;
+
+  cursor: pointer;
+
+}
+
+.fade-btn-enter{
+  opacity: 0;
+}
+.fade-btn-enter-active{
+  transition: all 0.5s ;
+}
+.fade-btn-leave-to{
+  opacity: 0;
+}
+.fade-btn-leave-active{
+  transition: all 0.5s;
+}
+
+
+</style>
\ No newline at end of file