修复样式问题

Aaron
1 parent 38d55fd3
Showing 5 changed files with 49 additions and 49 deletions Show diff stats
packages/Image-upload/index.vue
packages/confirm/index.vue
packages/file-upload/index.vue
packages/switch-button/index.vue
packages/tree-select/index.vue
 <template>
   <el-upload
     ref="uploader"
-    class="avatar-uploader"
+    class="eagle-uploader"
     :action="url"
     :show-file-list="false"
     :headers="headers"
@@ -10,15 +10,15 @@
     :disabled="disabled"
   >
     <div v-if="value" :style="{ 'background-image': `url(${value})` }" class="avatar">
-      <div class="avatar-uploader-mask" @click.stop>
-        <div class="avatar-uploader-mask-btns">
+      <div class="eagle-uploader-mask" @click.stop>
+        <div class="eagle-uploader-mask-btns">
           <i v-if="!disabled" class="iconfont icon-plus" @click="handleAdd"></i>
           <i class="iconfont icon-search" @click="handlePreview" style="margin: 0px 15px;"></i>
           <i v-if="!disabled" class="iconfont icon-delete" @click="handleDelete"></i>
         </div>
       </div>
     </div>
-    <i v-else class="avatar-uploader-icon" :class="disabled ? 'el-icon-picture-outline' : 'el-icon-plus'"></i>
+    <i v-else class="eagle-uploader-icon" :class="disabled ? 'el-icon-picture-outline' : 'el-icon-plus'"></i>
     <el-dialog class="photoPreviewer" :visible.sync="dialogVisible" append-to-body>
       <img width="100%" :src="dialogImageUrl" alt="">
     </el-dialog>
@@ -26,7 +26,7 @@
 </template>
 <style lang="scss">
-  .avatar-uploader {
+  .eagle-uploader {
     position: relative;
     .el-upload {
       border: 1px dashed #d9d9d9 !important;
@@ -38,7 +38,7 @@
     .el-upload:hover {
       border-color: #1890ff !important;
     }
-    .avatar-uploader-icon {
+    .eagle-uploader-icon {
       font-size: 28px !important;
       color: #8c939d !important;
       width: 178px !important;
@@ -54,11 +54,11 @@
       height: 178px !important;
       display: block !important;
       &:hover {
-        .avatar-uploader-mask {
+        .eagle-uploader-mask {
           display: block;
         }
       }
-      .avatar-uploader-mask {
+      .eagle-uploader-mask {
         position: absolute;
         display: none;
         top: 0;
@@ -67,7 +67,7 @@
         width: 100%;
         color: rgba(255, 255, 255, 0.9);
         background-color: rgba(0, 0, 0, 0.5);
-        .avatar-uploader-mask-btns {
+        .eagle-uploader-mask-btns {
           height: 100%;
           display: flex;
           align-items: center;
-<style rel="stylesheet/scss" lang="scss" scoped>
-.sf-confirm-icon {
+<style rel="stylesheet/scss" lang="scss">
+.eagle-confirm-icon {
   margin-right: 5px;
   font-size: 16px;
   color: #faad14;
 }
-.sf-confirm-title {
+.eagle-confirm-title {
   font-size: 14px;
   margin: 0px 0px 5px 0px;
 }
-.sf-confirm-button-panel {
+.eagle-confirm-button-panel {
   margin: 0;
   text-align: right;
 }
@@ -17,11 +17,11 @@
 <template>
   <el-popover :placement="placement" :trigger="trigger" v-model="visible">
     <div>
-      <p class="sf-confirm-title">
-        <i class="el-icon-info sf-confirm-icon"></i>
+      <p class="eagle-confirm-title">
+        <i class="el-icon-info eagle-confirm-icon"></i>
         <span>{{ title }}</span>
       </p>
-      <p class="sf-confirm-button-panel">
+      <p class="eagle-confirm-button-panel">
         <el-button size="mini" plain @click="cancel">否</el-button>
         <el-button size="mini" type="primary" style="margin-left: 5px" @click="confirm">是</el-button>
       </p>
-<style scoped>
-.file-icon {
+<style>
+.eagle-file-icon {
   color: #8c8c8c;
 }
-.file-link {
+.eagle-file-link {
   color: #2f54eb;
   display: flex;
   align-items: center;
 }
-.file-name {
+.eagle-file-name {
   padding: 0px 15px;
 }
-.file-name:hover {
+.eagle-file-name:hover {
   color: #69c0ff;
 }
-.file-delete {
+.eagle-file-delete {
   color: #d9d9d9;
 }
-.file-delete:hover {
+.eagle-file-delete:hover {
   color: #f5222d;
 }
 </style>
@@ -31,10 +31,10 @@
     :before-upload="beforeUpload"
     style="width: 100%;"
   >
-    <span v-if="value" class="file-link" @click.stop>
-      <i class="iconfont icon-attachment file-icon"></i>
-      <a class="file-name" :href="value" target="_blank">点击下载</a>
-      <i class="iconfont icon-close file-delete" title="点击删除" @click="deleteFile"></i>
+    <span v-if="value" class="eagle-file-link" @click.stop>
+      <i class="iconfont icon-attachment eagle-file-icon"></i>
+      <a class="eagle-file-name" :href="value" target="_blank">点击下载</a>
+      <i class="iconfont icon-close eagle-file-delete" title="点击删除" @click="deleteFile"></i>
     </span>
     <el-button v-else size="small" type="primary">点击上传</el-button>
   </el-upload>
 <template>
   <label role="checkbox" :class="className" :aria-checked="ariaChecked">
-    <input type="checkbox" class="v-switch-input" :name="name" @change.stop="toggle">
-    <div class="v-switch-core" :style="coreStyle">
-      <div class="v-switch-button" :style="buttonStyle" />
+    <input type="checkbox" class="eagle-switch-input" :name="name" @change.stop="toggle">
+    <div class="eagle-switch-core" :style="coreStyle">
+      <div class="eagle-switch-button" :style="buttonStyle" />
     </div>
     <template v-if="labels">
-      <span class="v-switch-label v-left" :style="labelStyle" v-if="toggled" v-html="labelChecked" />
-      <span class="v-switch-label v-right" :style="labelStyle" v-else v-html="labelUnchecked" />
+      <span class="eagle-switch-label v-left" :style="labelStyle" v-if="toggled" v-html="labelChecked" />
+      <span class="eagle-switch-label v-right" :style="labelStyle" v-else v-html="labelUnchecked" />
     </template>
   </label>
 </template>
@@ -93,7 +93,7 @@
           toggled,
           disabled
         } = this;
-        return ["vue-js-switch", {
+        return ["eagle-switch", {
           toggled,
           disabled
         }];
@@ -222,9 +222,9 @@
   };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
   $margin: 3px;
-  .vue-js-switch {
+  .eagle-switch {
     display: inline-block;
     position: relative;
     overflow: hidden;
@@ -232,10 +232,10 @@
     user-select: none;
     font-size: 10px;
     cursor: pointer;
-    .v-switch-input {
+    .eagle-switch-input {
       display: none;
     }
-    .v-switch-label {
+    .eagle-switch-label {
       position: absolute;
       top: 0;
       font-weight: 600;
@@ -247,7 +247,7 @@
         right: 10px;
       }
     }
-    .v-switch-core {
+    .eagle-switch-core {
       display: block;
       position: relative;
       box-sizing: border-box;
@@ -255,7 +255,7 @@
       margin: 0;
       transition: border-color 0.3s, background-color 0.3s;
       user-select: none;
-      .v-switch-button {
+      .eagle-switch-button {
         display: block;
         position: absolute;
         overflow: hidden;
-<style scoped>
-.sf-tree-search {
+<style>
+.eagle-tree-search {
   padding-bottom: 10px;
 }
-.sf-tree-node {
+.eagle-tree-node {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0px 5px;
 }
-.sf-tree-node-active {
+.eagle-tree-node-active {
   color: #1890ff;
 }
-.sf-tree-tip {
+.eagle-tree-tip {
   padding-bottom: 10px;
   border-bottom: 1px solid #e8e8e8;
 }
-.sf-tree {
+.eagle-tree {
   padding-top: 10px;
 }
 .green {
@@ -37,15 +37,15 @@
       :append-to-body="true"
       width="30%"
     >
-      <div v-if="filterable" class="sf-tree-search">
+      <div v-if="filterable" class="eagle-tree-search">
         <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small"></el-input>
       </div>
-      <div class="sf-tree-tip">
+      <div class="eagle-tree-tip">
         <span v-if="selected">已选中：<span class="red">{{ selected[treeProps.label] }}</span></span>
         <span v-else>请选择：</span>
       </div>
-      <el-tree ref="tree" class="sf-tree" :data="treeData" :props="treeProps" :node-key="nodeKey" @node-click="handleNodeClick" :filter-node-method="filterNode" :expand-on-click-node="false">
-        <span class="sf-tree-node" :class="{ 'sf-tree-node-active': selected && selected[nodeKey] === data[nodeKey] }" slot-scope="{ node, data }">
+      <el-tree ref="tree" class="eagle-tree" :data="treeData" :props="treeProps" :node-key="nodeKey" @node-click="handleNodeClick" :filter-node-method="filterNode" :expand-on-click-node="false">
+        <span class="eagle-tree-node" :class="{ 'eagle-tree-node-active': selected && selected[nodeKey] === data[nodeKey] }" slot-scope="{ node, data }">
           <span>{{ node.label }}</span>
           <span v-if="selected && selected[nodeKey] === data[nodeKey]">
             <i class="green el-icon-success"></i>