framework / eagle-web-toolkit

Download as
Browse Code »

Commit 20cb9d4fb972da6942827caa1ef818ae05013559

Authored by Aaron
1 parent 38d55fd3
Exists in master and in 1 other branch legacy

修复样式问题

Showing 5 changed files with 49 additions and 49 deletions   Show diff stats
packages/Image-upload/index.vue
  Diff comments   View file @20cb9d4
1 1 <template>
2 2 <el-upload
3 3 ref="uploader"
4   - class="avatar-uploader"
  4 + class="eagle-uploader"
5 5 :action="url"
6 6 :show-file-list="false"
7 7 :headers="headers"
... ... @@ -10,15 +10,15 @@
10 10 :disabled="disabled"
11 11 >
12 12 <div v-if="value" :style="{ 'background-image': `url(${value})` }" class="avatar">
13   - <div class="avatar-uploader-mask" @click.stop>
14   - <div class="avatar-uploader-mask-btns">
  13 + <div class="eagle-uploader-mask" @click.stop>
  14 + <div class="eagle-uploader-mask-btns">
15 15 <i v-if="!disabled" class="iconfont icon-plus" @click="handleAdd"></i>
16 16 <i class="iconfont icon-search" @click="handlePreview" style="margin: 0px 15px;"></i>
17 17 <i v-if="!disabled" class="iconfont icon-delete" @click="handleDelete"></i>
18 18 </div>
19 19 </div>
20 20 </div>
21   - <i v-else class="avatar-uploader-icon" :class="disabled ? 'el-icon-picture-outline' : 'el-icon-plus'"></i>
  21 + <i v-else class="eagle-uploader-icon" :class="disabled ? 'el-icon-picture-outline' : 'el-icon-plus'"></i>
22 22 <el-dialog class="photoPreviewer" :visible.sync="dialogVisible" append-to-body>
23 23 <img width="100%" :src="dialogImageUrl" alt="">
24 24 </el-dialog>
... ... @@ -26,7 +26,7 @@
26 26 </template>
27 27  
28 28 <style lang="scss">
29   - .avatar-uploader {
  29 + .eagle-uploader {
30 30 position: relative;
31 31 .el-upload {
32 32 border: 1px dashed #d9d9d9 !important;
... ... @@ -38,7 +38,7 @@
38 38 .el-upload:hover {
39 39 border-color: #1890ff !important;
40 40 }
41   - .avatar-uploader-icon {
  41 + .eagle-uploader-icon {
42 42 font-size: 28px !important;
43 43 color: #8c939d !important;
44 44 width: 178px !important;
... ... @@ -54,11 +54,11 @@
54 54 height: 178px !important;
55 55 display: block !important;
56 56 &:hover {
57   - .avatar-uploader-mask {
  57 + .eagle-uploader-mask {
58 58 display: block;
59 59 }
60 60 }
61   - .avatar-uploader-mask {
  61 + .eagle-uploader-mask {
62 62 position: absolute;
63 63 display: none;
64 64 top: 0;
... ... @@ -67,7 +67,7 @@
67 67 width: 100%;
68 68 color: rgba(255, 255, 255, 0.9);
69 69 background-color: rgba(0, 0, 0, 0.5);
70   - .avatar-uploader-mask-btns {
  70 + .eagle-uploader-mask-btns {
71 71 height: 100%;
72 72 display: flex;
73 73 align-items: center;
... ...
packages/confirm/index.vue
  Diff comments   View file @20cb9d4
1   -<style rel="stylesheet/scss" lang="scss" scoped>
2   -.sf-confirm-icon {
  1 +<style rel="stylesheet/scss" lang="scss">
  2 +.eagle-confirm-icon {
3 3 margin-right: 5px;
4 4 font-size: 16px;
5 5 color: #faad14;
6 6 }
7   -.sf-confirm-title {
  7 +.eagle-confirm-title {
8 8 font-size: 14px;
9 9 margin: 0px 0px 5px 0px;
10 10 }
11   -.sf-confirm-button-panel {
  11 +.eagle-confirm-button-panel {
12 12 margin: 0;
13 13 text-align: right;
14 14 }
... ... @@ -17,11 +17,11 @@
17 17 <template>
18 18 <el-popover :placement="placement" :trigger="trigger" v-model="visible">
19 19 <div>
20   - <p class="sf-confirm-title">
21   - <i class="el-icon-info sf-confirm-icon"></i>
  20 + <p class="eagle-confirm-title">
  21 + <i class="el-icon-info eagle-confirm-icon"></i>
22 22 <span>{{ title }}</span>
23 23 </p>
24   - <p class="sf-confirm-button-panel">
  24 + <p class="eagle-confirm-button-panel">
25 25 <el-button size="mini" plain @click="cancel">否</el-button>
26 26 <el-button size="mini" type="primary" style="margin-left: 5px" @click="confirm">是</el-button>
27 27 </p>
... ...
packages/file-upload/index.vue
  Diff comments   View file @20cb9d4
1   -<style scoped>
2   -.file-icon {
  1 +<style>
  2 +.eagle-file-icon {
3 3 color: #8c8c8c;
4 4 }
5   -.file-link {
  5 +.eagle-file-link {
6 6 color: #2f54eb;
7 7 display: flex;
8 8 align-items: center;
9 9 }
10   -.file-name {
  10 +.eagle-file-name {
11 11 padding: 0px 15px;
12 12 }
13   -.file-name:hover {
  13 +.eagle-file-name:hover {
14 14 color: #69c0ff;
15 15 }
16   -.file-delete {
  16 +.eagle-file-delete {
17 17 color: #d9d9d9;
18 18 }
19   -.file-delete:hover {
  19 +.eagle-file-delete:hover {
20 20 color: #f5222d;
21 21 }
22 22 </style>
... ... @@ -31,10 +31,10 @@
31 31 :before-upload="beforeUpload"
32 32 style="width: 100%;"
33 33 >
34   - <span v-if="value" class="file-link" @click.stop>
35   - <i class="iconfont icon-attachment file-icon"></i>
36   - <a class="file-name" :href="value" target="_blank">点击下载</a>
37   - <i class="iconfont icon-close file-delete" title="点击删除" @click="deleteFile"></i>
  34 + <span v-if="value" class="eagle-file-link" @click.stop>
  35 + <i class="iconfont icon-attachment eagle-file-icon"></i>
  36 + <a class="eagle-file-name" :href="value" target="_blank">点击下载</a>
  37 + <i class="iconfont icon-close eagle-file-delete" title="点击删除" @click="deleteFile"></i>
38 38 </span>
39 39 <el-button v-else size="small" type="primary">点击上传</el-button>
40 40 </el-upload>
... ...
packages/switch-button/index.vue
  Diff comments   View file @20cb9d4
1 1 <template>
2 2 <label role="checkbox" :class="className" :aria-checked="ariaChecked">
3   - <input type="checkbox" class="v-switch-input" :name="name" @change.stop="toggle">
4   - <div class="v-switch-core" :style="coreStyle">
5   - <div class="v-switch-button" :style="buttonStyle" />
  3 + <input type="checkbox" class="eagle-switch-input" :name="name" @change.stop="toggle">
  4 + <div class="eagle-switch-core" :style="coreStyle">
  5 + <div class="eagle-switch-button" :style="buttonStyle" />
6 6 </div>
7 7 <template v-if="labels">
8   - <span class="v-switch-label v-left" :style="labelStyle" v-if="toggled" v-html="labelChecked" />
9   - <span class="v-switch-label v-right" :style="labelStyle" v-else v-html="labelUnchecked" />
  8 + <span class="eagle-switch-label v-left" :style="labelStyle" v-if="toggled" v-html="labelChecked" />
  9 + <span class="eagle-switch-label v-right" :style="labelStyle" v-else v-html="labelUnchecked" />
10 10 </template>
11 11 </label>
12 12 </template>
... ... @@ -93,7 +93,7 @@
93 93 toggled,
94 94 disabled
95 95 } = this;
96   - return ["vue-js-switch", {
  96 + return ["eagle-switch", {
97 97 toggled,
98 98 disabled
99 99 }];
... ... @@ -222,9 +222,9 @@
222 222 };
223 223 </script>
224 224  
225   -<style lang="scss" scoped>
  225 +<style lang="scss">
226 226 $margin: 3px;
227   - .vue-js-switch {
  227 + .eagle-switch {
228 228 display: inline-block;
229 229 position: relative;
230 230 overflow: hidden;
... ... @@ -232,10 +232,10 @@
232 232 user-select: none;
233 233 font-size: 10px;
234 234 cursor: pointer;
235   - .v-switch-input {
  235 + .eagle-switch-input {
236 236 display: none;
237 237 }
238   - .v-switch-label {
  238 + .eagle-switch-label {
239 239 position: absolute;
240 240 top: 0;
241 241 font-weight: 600;
... ... @@ -247,7 +247,7 @@
247 247 right: 10px;
248 248 }
249 249 }
250   - .v-switch-core {
  250 + .eagle-switch-core {
251 251 display: block;
252 252 position: relative;
253 253 box-sizing: border-box;
... ... @@ -255,7 +255,7 @@
255 255 margin: 0;
256 256 transition: border-color 0.3s, background-color 0.3s;
257 257 user-select: none;
258   - .v-switch-button {
  258 + .eagle-switch-button {
259 259 display: block;
260 260 position: absolute;
261 261 overflow: hidden;
... ...
packages/tree-select/index.vue
  Diff comments   View file @20cb9d4
1   -<style scoped>
2   -.sf-tree-search {
  1 +<style>
  2 +.eagle-tree-search {
3 3 padding-bottom: 10px;
4 4 }
5   -.sf-tree-node {
  5 +.eagle-tree-node {
6 6 flex: 1;
7 7 display: flex;
8 8 align-items: center;
9 9 justify-content: space-between;
10 10 padding: 0px 5px;
11 11 }
12   -.sf-tree-node-active {
  12 +.eagle-tree-node-active {
13 13 color: #1890ff;
14 14 }
15   -.sf-tree-tip {
  15 +.eagle-tree-tip {
16 16 padding-bottom: 10px;
17 17 border-bottom: 1px solid #e8e8e8;
18 18 }
19   -.sf-tree {
  19 +.eagle-tree {
20 20 padding-top: 10px;
21 21 }
22 22 .green {
... ... @@ -37,15 +37,15 @@
37 37 :append-to-body="true"
38 38 width="30%"
39 39 >
40   - <div v-if="filterable" class="sf-tree-search">
  40 + <div v-if="filterable" class="eagle-tree-search">
41 41 <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="small"></el-input>
42 42 </div>
43   - <div class="sf-tree-tip">
  43 + <div class="eagle-tree-tip">
44 44 <span v-if="selected">已选中：<span class="red">{{ selected[treeProps.label] }}</span></span>
45 45 <span v-else>请选择：</span>
46 46 </div>
47   - <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">
48   - <span class="sf-tree-node" :class="{ 'sf-tree-node-active': selected && selected[nodeKey] === data[nodeKey] }" slot-scope="{ node, data }">
  47 + <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">
  48 + <span class="eagle-tree-node" :class="{ 'eagle-tree-node-active': selected && selected[nodeKey] === data[nodeKey] }" slot-scope="{ node, data }">
49 49 <span>{{ node.label }}</span>
50 50 <span v-if="selected && selected[nodeKey] === data[nodeKey]">
51 51 <i class="green el-icon-success"></i>
... ...