Commit d59b2d89e90f2190d05ba9c710b0b76c8dd3c308
1 parent
fe44789e30
Exists in
master
madd appManage page
Showing
4 changed files
with
161 additions
and
565 deletions
Show diff stats
src/router/modules/application.js
| 1 | import Layout from '@/layout' | 1 | import Layout from '@/layout' |
| 2 | 2 | ||
| 3 | const applicationRouter = { | 3 | const applicationRouter = { |
| 4 | path: '/application', | 4 | path: '/application', |
| 5 | component: Layout, | 5 | component: Layout, |
| 6 | redirect: '/application/page', | 6 | redirect: '/application/page', |
| 7 | alwaysShow: true, // will always show the root menu | 7 | alwaysShow: true, // will always show the root menu |
| 8 | name: 'Application', | 8 | name: 'Application', |
| 9 | meta: { | 9 | meta: { |
| 10 | title: '应用', | 10 | title: '应用', |
| 11 | icon: 'component', | 11 | icon: 'component', |
| 12 | roles: ['admin', 'assistant'] // you can set roles in root nav | 12 | roles: ['admin', 'assistant'] // you can set roles in root nav |
| 13 | }, | 13 | }, |
| 14 | children: [{ | 14 | children: [{ |
| 15 | path: 'appManage', | 15 | path: 'appManage', |
| 16 | component: () => import('@/views/application/appManage'), | 16 | component: () => import('@/views/application/appManage'), // 应用管理/添加 |
| 17 | name: 'appManage', | 17 | name: 'appManage', |
| 18 | meta: { | 18 | meta: { |
| 19 | title: '应用管理', | 19 | title: '应用管理', |
| 20 | icon: 'component', | 20 | icon: 'component', |
| 21 | roles: ['admin', 'assistant'] // or you can only set roles in sub nav | 21 | roles: ['admin', 'assistant'] // or you can only set roles in sub nav |
| 22 | } | 22 | } |
| 23 | }] | 23 | }, |
| 24 | { | ||
| 25 | path: 'appList', | ||
| 26 | component: () => import('@/views/application/appList'), // 应用列表 | ||
| 27 | name: 'appList', | ||
| 28 | meta: { | ||
| 29 | title: '应用列表', | ||
| 30 | icon: 'list', | ||
| 31 | roles: ['admin', 'assistant'] // or you can only set roles in sub nav | ||
| 32 | } | ||
| 33 | } | ||
| 34 | ] | ||
| 24 | } | 35 | } |
| 25 | export default applicationRouter | 36 | export default applicationRouter |
| 26 | 37 |
src/views/application/appList.vue
| File was created | 1 | <template> | |
| 2 | <el-container class="app-container"> | ||
| 3 | <el-header> | ||
| 4 | 应用列表 | ||
| 5 | </el-header> | ||
| 6 | <el-main> | ||
| 7 | asd | ||
| 8 | </el-main> | ||
| 9 | <el-aside> | ||
| 10 | <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" /> | ||
| 11 | <el-tree | ||
| 12 | ref="tree2" | ||
| 13 | :data="data2" | ||
| 14 | :props="defaultProps" | ||
| 15 | :filter-node-method="filterNode" | ||
| 16 | class="filter-tree" | ||
| 17 | default-expand-all | ||
| 18 | /> | ||
| 19 | </el-aside> | ||
| 20 | |||
| 21 | </el-container> | ||
| 22 | </template> | ||
| 23 | |||
| 24 | <script> | ||
| 25 | export default { | ||
| 26 | |||
| 27 | data() { | ||
| 28 | return { | ||
| 29 | filterText: '', | ||
| 30 | data2: [{ | ||
| 31 | id: 1, | ||
| 32 | label: 'Level one 1', | ||
| 33 | children: [{ | ||
| 34 | id: 4, | ||
| 35 | label: 'Level two 1-1' }, | ||
| 36 | { | ||
| 37 | id: 10, | ||
| 38 | label: 'Level three 1-1-2' | ||
| 39 | } | ||
| 40 | ] | ||
| 41 | }, { | ||
| 42 | id: 2, | ||
| 43 | label: 'Level one 2', | ||
| 44 | children: [{ | ||
| 45 | id: 5, | ||
| 46 | label: 'Level two 2-1' | ||
| 47 | }, { | ||
| 48 | id: 6, | ||
| 49 | label: 'Level two 2-2' | ||
| 50 | }] | ||
| 51 | }, { | ||
| 52 | id: 3, | ||
| 53 | label: 'Level one 3', | ||
| 54 | children: [{ | ||
| 55 | id: 7, | ||
| 56 | label: 'Level two 3-1' | ||
| 57 | }, { | ||
| 58 | id: 8, | ||
| 59 | label: 'Level two 3-2' | ||
| 60 | }] | ||
| 61 | }], | ||
| 62 | defaultProps: { | ||
| 63 | children: 'children', | ||
| 64 | label: 'label' | ||
| 65 | } | ||
| 66 | } | ||
| 67 | }, | ||
| 68 | watch: { | ||
| 69 | filterText(val) { | ||
| 70 | this.$refs.tree2.filter(val) | ||
| 71 | } | ||
| 72 | }, | ||
| 73 | |||
| 74 | methods: { | ||
| 75 | filterNode(value, data) { | ||
| 76 | if (!value) return true | ||
| 77 | return data.label.indexOf(value) !== -1 | ||
| 78 | } | ||
| 79 | } | ||
| 80 | } | ||
| 81 | </script> | ||
| 82 | |||
| 83 |
src/views/application/appManage.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="login-container"> | 2 | <el-container class="app-container"> |
| 3 | <el-button | 3 | <el-header> |
| 4 | type="primary" | 4 | 添加一个新应用（管理员不允许直接添加应用） |
| 5 | @click="() => addNode()" | 5 | </el-header> |
| 6 | >{{ $t('users.add') }}</el-button> | 6 | <el-main> |
| 7 | <el-tree | 7 | <el-form ref="form" :model="form" label-width="120px"> |
| 8 | ref="tree" | 8 | <el-form-item label="app_name"> |
| 9 | :data="data" | 9 | <el-input v-model="form.app_name" /> |
| 10 | show-checkbox | 10 | </el-form-item> |
| 11 | node-key="id" | ||
| 12 | highlight-current | ||
| 13 | check-strictly | ||
| 14 | indent="40" | ||
| 15 | icon-class="el-icon-pc" | ||
| 16 | :props="defaultProps" | ||
| 17 | > | ||
| 18 | <!-- <el-tree | ||
| 19 | :data="data" | ||
| 20 | show-checkbox | ||
| 21 | node-key="id" | ||
| 22 | default-expand-all | ||
| 23 | highlight-current | ||
| 24 | isLeaf | ||
| 25 | @node-contextmenu="()=>rightKey(node, data)" | ||
| 26 | check-strictly//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false | ||
| 27 | :expand-on-click-node="false"//是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 | ||
| 28 | :props="defaultProps" | ||
| 29 | > --> | ||
| 30 | <span | ||
| 31 | slot-scope="{ node, data }" | ||
| 32 | class="custom-tree-node" | ||
| 33 | > | ||
| 34 | <span>{{ node.label }}</span> | ||
| 35 | <span> | ||
| 36 | <el-button | ||
| 37 | type="primary" | ||
| 38 | icon="el-icon-upload" | ||
| 39 | size="mini" | ||
| 40 | @click="() => append(data)" | ||
| 41 | > | ||
| 42 | {{ $t('users.add') }} | ||
| 43 | </el-button> | ||
| 44 | <el-button | ||
| 45 | type="primary" | ||
| 46 | icon="el-icon-edit" | ||
| 47 | size="mini" | ||
| 48 | @click="() => update(node, data)" | ||
| 49 | > | ||
| 50 | {{ $t('users.update') }} | ||
| 51 | </el-button> | ||
| 52 | <el-button | ||
| 53 | type="primary" | ||
| 54 | icon="el-icon-delete" | ||
| 55 | size="mini" | ||
| 56 | class="danger" | ||
| 57 | @click="() => remove(node, data)" | ||
| 58 | > | ||
| 59 | {{ $t('users.del') }} | ||
| 60 | </el-button> | ||
| 61 | </span> | ||
| 62 | </span> | ||
| 63 | </el-tree> | ||
| 64 | 11 | ||
| 65 | <!-- <div class="buttons"> | 12 | <el-form-item label="app_type"> |
| 66 | <el-button @click="getCheckedNodes">通过 node 获取</el-button> | 13 | <el-radio-group v-model="form.app_type"> |
| 67 | <el-button @click="getCheckedKeys">通过 key 获取</el-button> | 14 | <el-radio label="自建站" /> |
| 68 | <el-button @click="setCheckedNodes">通过 node 设置</el-button> | 15 | <el-radio label="自营小程序" /> |
| 69 | <el-button @click="setCheckedKeys">通过 key 设置</el-button> | 16 | <el-radio label="淘宝店" /> |
| 70 | <el-button @click="resetChecked">清空</el-button> | 17 | <el-radio label="微店" /> |
| 71 | </div> --> | 18 | <el-radio label="亚马逊店" /> |
| 72 | </div> | 19 | <el-radio label="易贝店" /> |
| 20 | <el-radio label="拼多多店" /> | ||
| 21 | <el-radio label="抖音店" /> | ||
| 22 | <el-radio label="朋友圈店" /> | ||
| 23 | </el-radio-group> | ||
| 24 | </el-form-item> | ||
| 25 | |||
| 26 | <el-form-item label="app_desc"> | ||
| 27 | <el-input v-model="form.app_desc" type="textarea" /> | ||
| 28 | </el-form-item> | ||
| 29 | <el-form-item label="app_api_key"> | ||
| 30 | <el-input v-model="form.app_api_key" /> | ||
| 31 | </el-form-item> | ||
| 32 | <el-form-item label="app_user_defined"> | ||
| 33 | <el-input v-model="form.app_user_defined" /> | ||
| 34 | </el-form-item> | ||
| 35 | |||
| 36 | <el-form-item label="app_area_defined"> | ||
| 37 | <el-input v-model="form.app_area_defined" /> | ||
| 38 | </el-form-item> | ||
| 39 | |||
| 40 | <el-form-item label="app_lang_defined"> | ||
| 41 | <el-input v-model="form.app_lang_defined" /> | ||
| 42 | </el-form-item> | ||
| 43 | |||
| 44 | <el-form-item> | ||
| 45 | <el-button type="primary" @click="onSubmit">添加</el-button> | ||
| 46 | </el-form-item> | ||
| 47 | </el-form> | ||
| 48 | </el-main> | ||
| 49 | </el-container> | ||
| 73 | </template> | 50 | </template> |
| 51 | |||
| 74 | <script> | 52 | <script> |
| 75 | let id = 1000 | ||
| 76 | export default { | 53 | export default { |
| 77 | data() { | 54 | data() { |
| 78 | return { | 55 | return { |
| 79 | data: [ | 56 | form: { |
| 80 | { | 57 | app_name: '', |
| 81 | label: '成镜', | 58 | app_type: '', |
| 82 | id: '1', | 59 | app_desc: '', |
| 83 | children: [ | 60 | app_api_key: '', |
| 84 | { | 61 | app_user_defined: '', |
| 85 | label: '款式', | 62 | app_area_defined: '', |
| 86 | id: '11', | 63 | app_lang_defined: '' |
| 87 | children: [ | ||
| 88 | { label: '青春学子风' }, | ||
| 89 | { label: '休闲' }, | ||
| 90 | { label: '商务' }, | ||
| 91 | { label: '复古' }, | ||
| 92 | { label: '时尚' }, | ||
| 93 | { label: '质感哥特潮' }, | ||
| 94 | { label: '轻简北欧风' }, | ||
| 95 | { label: '理性几何派' }, | ||
| 96 | { label: '多元新风尚' }, | ||
| 97 | { label: '立体巴洛克' }, | ||
| 98 | { label: '有机未来时' }, | ||
| 99 | { label: '无界人文系' }, | ||
| 100 | { label: '自然舒视角' }, | ||
| 101 | { label: '流线洛可可' }, | ||
| 102 | { label: '奶奶风' }, | ||
| 103 | { label: '简约-极简文艺范' }, | ||
| 104 | { label: '运动风' }, | ||
| 105 | { label: '行政风' }, | ||
| 106 | { label: '折射率' } | ||
| 107 | ] | ||
| 108 | }, | ||
| 109 | { label: '个性化服务', id: '267', children: [] }, | ||
| 110 | { | ||
| 111 | label: '赠品', | ||
| 112 | id: '259', | ||
| 113 | children: [{ label: '眼镜布' }, { label: '眼镜盒' }] | ||
| 114 | }, | ||
| 115 | { | ||
| 116 | label: '场景', | ||
| 117 | id: '258', | ||
| 118 | children: [ | ||
| 119 | { label: '学校场景' }, | ||
| 120 | { label: '出行交际' }, | ||
| 121 | { label: '夜店迷人' }, | ||
| 122 | { label: '明星同款' } | ||
| 123 | ] | ||
| 124 | }, | ||
| 125 | { | ||
| 126 | label: '销售保障', | ||
| 127 | id: '245', | ||
| 128 | children: [ | ||
| 129 | { label: '可退' }, | ||
| 130 | { label: '可换' }, | ||
| 131 | { label: '可修' } | ||
| 132 | ] | ||
| 133 | }, | ||
| 134 | { | ||
| 135 | label: '功能', | ||
| 136 | id: '140', | ||
| 137 | children: [ | ||
| 138 | { label: '防踩压' }, | ||
| 139 | { label: '防扭曲' }, | ||
| 140 | { label: '抗过敏' }, | ||
| 141 | { label: '防腐蚀' }, | ||
| 142 | { label: '耐磨损' }, | ||
| 143 | { label: '抗蓝光' } | ||
| 144 | ] | ||
| 145 | }, | ||
| 146 | { | ||
| 147 | label: '品牌', | ||
| 148 | id: '71', | ||
| 149 | children: [ | ||
| 150 | { label: '购易' }, | ||
| 151 | { label: '海俪恩' }, | ||
| 152 | { label: '沙漠风暴' }, | ||
| 153 | { label: '古诗' }, | ||
| 154 | { label: '暴龙' }, | ||
| 155 | { label: '犀牛' }, | ||
| 156 | { label: 'Ray-Ban雷朋' }, | ||
| 157 | { label: 'PARIM派丽蒙' }, | ||
| 158 | { label: '石狼' }, | ||
| 159 | { label: '木九十' } | ||
| 160 | ] | ||
| 161 | }, | ||
| 162 | { | ||
| 163 | label: '边形', | ||
| 164 | id: '49', | ||
| 165 | children: [ | ||
| 166 | { label: '半框' }, | ||
| 167 | { label: '全框' }, | ||
| 168 | { label: '无框' } | ||
| 169 | ] | ||
| 170 | }, | ||
| 171 | { | ||
| 172 | label: '性别', | ||
| 173 | id: '23', | ||
| 174 | children: [{ label: '男性' }, { label: '女性' }] | ||
| 175 | }, | ||
| 176 | { | ||
| 177 | label: '梁型', | ||
| 178 | id: '20', | ||
| 179 | children: [{ label: '双梁' }, { label: '单梁' }] | ||
| 180 | }, | ||
| 181 | { | ||
| 182 | label: '重量', | ||
| 183 | id: '19', | ||
| 184 | children: [{ label: '30克以下' }, { label: '80克以上' }] | ||
| 185 | }, | ||
| 186 | { | ||
| 187 | label: '适用脸型', | ||
| 188 | id: '15', | ||
| 189 | children: [{ label: '方' }, { label: '圆' }, { label: '瓜子' }] | ||
| 190 | }, | ||
| 191 | { | ||
| 192 | label: '形状', | ||
| 193 | id: '14', | ||
| 194 | children: [ | ||
| 195 | { label: '正圆形' }, | ||
| 196 | { label: '椭圆形' }, | ||
| 197 | { label: '方圆' }, | ||
| 198 | { label: '方形' }, | ||
| 199 | { label: '多边形' }, | ||
| 200 | { label: '内三角(蛤蟆)' }, | ||
| 201 | { label: '外三角(蝶形)' } | ||
| 202 | ] | ||
| 203 | }, | ||
| 204 | { label: '年龄', id: '12', children: [{ label: '通用' }] }, | ||
| 205 | { | ||
| 206 | label: '材质', | ||
| 207 | id: '10', | ||
| 208 | children: [ | ||
| 209 | { label: '板材' }, | ||
| 210 | { label: '纯钛' }, | ||
| 211 | { label: 'TR90' }, | ||
| 212 | { label: '木质' }, | ||
| 213 | { label: '竹质' }, | ||
| 214 | { label: 'β钛' }, | ||
| 215 | { label: 'PC' }, | ||
| 216 | { label: 'ULTEM塑钢' }, | ||
| 217 | { label: '钨钛塑钢' }, | ||
| 218 | { label: '镁铝合金' }, | ||
| 219 | { label: '碳纤维' } | ||
| 220 | ] | ||
| 221 | }, | ||
| 222 | { label: '折射率', id: '286', children: [] }, | ||
| 223 | { | ||
| 224 | label: '颜色', | ||
| 225 | id: '13', | ||
| 226 | children: [ | ||
| 227 | { label: '金色' }, | ||
| 228 | { label: '银色' }, | ||
| 229 | { label: '黑色' }, | ||
| 230 | { label: '彩色' }, | ||
| 231 | { label: '枪色' } | ||
| 232 | ] | ||
| 233 | } | ||
| 234 | ] | ||
| 235 | }, | ||
| 236 | { | ||
| 237 | label: '镜片', | ||
| 238 | id: '2', | ||
| 239 | children: [ | ||
| 240 | { | ||
| 241 | label: '面型', | ||
| 242 | id: '85', | ||
| 243 | children: [{ label: '球面单光' }, { label: '非球面单光' }] | ||
| 244 | }, | ||
| 245 | { label: '近视度数', id: '92', children: [] }, | ||
| 246 | { label: '散光', id: '93', children: [] }, | ||
| 247 | { | ||
| 248 | label: '功能', | ||
| 249 | id: '95', | ||
| 250 | children: [ | ||
| 251 | { label: '防起雾' }, | ||
| 252 | { label: '防蓝光' }, | ||
| 253 | { label: '防紫外线' }, | ||
| 254 | { label: '偏光' }, | ||
| 255 | { label: '染色' }, | ||
| 256 | { label: '抗疲劳' }, | ||
| 257 | { label: '青少年渐进' }, | ||
| 258 | { label: '内渐进' }, | ||
| 259 | { label: '变色' }, | ||
| 260 | { label: '双光' }, | ||
| 261 | { label: '耐磨损' }, | ||
| 262 | { label: '防尘' }, | ||
| 263 | { label: '防水' }, | ||
| 264 | { label: '防摔' }, | ||
| 265 | { label: '防指纹' }, | ||
| 266 | { label: '防反光' } | ||
| 267 | ] | ||
| 268 | }, | ||
| 269 | { | ||
| 270 | label: '颜色', | ||
| 271 | id: '100', | ||
| 272 | children: [ | ||
| 273 | { label: '透明' }, | ||
| 274 | { label: '染色' }, | ||
| 275 | { label: '变色' }, | ||
| 276 | { label: '单色' } | ||
| 277 | ] | ||
| 278 | }, | ||
| 279 | { | ||
| 280 | label: '折射率', | ||
| 281 | id: '101', | ||
| 282 | children: [ | ||
| 283 | { label: '1.56' }, | ||
| 284 | { label: '1.60' }, | ||
| 285 | { label: '1.65' }, | ||
| 286 | { label: '1.67' }, | ||
| 287 | { label: '1.71' }, | ||
| 288 | { label: '1.74' } | ||
| 289 | ] | ||
| 290 | }, | ||
| 291 | { label: '阿贝数（色散）', id: '102', children: [] }, | ||
| 292 | { label: '重量', id: '103', children: [] }, | ||
| 293 | { | ||
| 294 | label: '材质', | ||
| 295 | id: '104', | ||
| 296 | children: [ | ||
| 297 | { label: '树脂' }, | ||
| 298 | { label: '玻璃' }, | ||
| 299 | { label: '宇宙PC' }, | ||
| 300 | { label: 'PC' } | ||
| 301 | ] | ||
| 302 | }, | ||
| 303 | { | ||
| 304 | label: '品牌', | ||
| 305 | id: '118', | ||
| 306 | children: [ | ||
| 307 | { label: '好视力' }, | ||
| 308 | { label: 'RAISE锐视' }, | ||
| 309 | { label: '依视路' }, | ||
| 310 | { label: '凯米' }, | ||
| 311 | { label: '蔡司' }, | ||
| 312 | { label: '舒曼' } | ||
| 313 | ] | ||
| 314 | }, | ||
| 315 | { | ||
| 316 | label: '销售保障', | ||
| 317 | id: '249', | ||
| 318 | children: [ | ||
| 319 | { label: '可退' }, | ||
| 320 | { label: '可换' }, | ||
| 321 | { label: '可修' } | ||
| 322 | ] | ||
| 323 | } | ||
| 324 | ] | ||
| 325 | }, | ||
| 326 | { | ||
| 327 | label: '隐形眼镜', | ||
| 328 | id: '88', | ||
| 329 | children: [ | ||
| 330 | { | ||
| 331 | label: '颜色', | ||
| 332 | id: '105', | ||
| 333 | children: [ | ||
| 334 | { label: '绿' }, | ||
| 335 | { label: '灰' }, | ||
| 336 | { label: '黑' }, | ||
| 337 | { label: '紫' }, | ||
| 338 | { label: '蓝' }, | ||
| 339 | { label: '棕色' }, | ||
| 340 | { label: '紫色' } | ||
| 341 | ] | ||
| 342 | }, | ||
| 343 | { | ||
| 344 | label: '颜料', | ||
| 345 | id: '106', | ||
| 346 | children: [{ label: '水性' }, { label: '油性' }] | ||
| 347 | }, | ||
| 348 | { label: '度数', id: '107', children: [] }, | ||
| 349 | { | ||
| 350 | label: '周期', | ||
| 351 | id: '108', | ||
| 352 | children: [ | ||
| 353 | { label: '日抛' }, | ||
| 354 | { label: '周抛' }, | ||
| 355 | { label: '双周抛' }, | ||
| 356 | { label: '月抛' }, | ||
| 357 | { label: '季抛' }, | ||
| 358 | { label: '半年抛' }, | ||
| 359 | { label: '年抛' } | ||
| 360 | ] | ||
| 361 | }, | ||
| 362 | { | ||
| 363 | label: '品牌', | ||
| 364 | id: '133', | ||
| 365 | children: [ | ||
| 366 | { label: 'HolyNara' }, | ||
| 367 | { label: '爱尔康' }, | ||
| 368 | { label: 'MaxLook' }, | ||
| 369 | { label: 'NEO' }, | ||
| 370 | { label: 'GEO' }, | ||
| 371 | { label: '实瞳' }, | ||
| 372 | { label: '茵洛' }, | ||
| 373 | { label: 'DAZZSHOP' }, | ||
| 374 | { label: 'O-LENS' }, | ||
| 375 | { label: 'envie' }, | ||
| 376 | { label: '曼秀雷敦' }, | ||
| 377 | { label: '妃蜜莉' }, | ||
| 378 | { label: '海俪恩' }, | ||
| 379 | { label: '凯达' }, | ||
| 380 | { label: '蔡司' }, | ||
| 381 | { label: '酷视' }, | ||
| 382 | { label: 'LILMOON' }, | ||
| 383 | { label: 'RICHBABY' }, | ||
| 384 | { label: 'T-Garden' }, | ||
| 385 | { label: 'lenstown' }, | ||
| 386 | { label: '新加坡P2' }, | ||
| 387 | { label: '星欧' }, | ||
| 388 | { label: '美尼康' }, | ||
| 389 | { label: '美汐' }, | ||
| 390 | { label: '欧舒天' }, | ||
| 391 | { label: '海昌' }, | ||
| 392 | { label: '菲士康' }, | ||
| 393 | { label: '卫康' }, | ||
| 394 | { label: '库博' }, | ||
| 395 | { label: '安视优' }, | ||
| 396 | { label: '美若康' }, | ||
| 397 | { label: '视康' }, | ||
| 398 | { label: '澜柏' }, | ||
| 399 | { label: '3N' }, | ||
| 400 | { label: 'BIJOU' }, | ||
| 401 | { label: '依视明' }, | ||
| 402 | { label: '博士伦' }, | ||
| 403 | { label: '瞳昕' }, | ||
| 404 | { label: '科莱博' }, | ||
| 405 | { label: '绮芙莉' }, | ||
| 406 | { label: '雅培' }, | ||
| 407 | { label: '爱能视' }, | ||
| 408 | { label: '女神秘语' }, | ||
| 409 | { label: '博视顿' }, | ||
| 410 | { label: '妆美堂' }, | ||
| 411 | { label: '人鱼姬' }, | ||
| 412 | { label: 'EverColor' }, | ||
| 413 | { label: 'Sincere' } | ||
| 414 | ] | ||
| 415 | }, | ||
| 416 | { | ||
| 417 | label: '工艺', | ||
| 418 | id: '159', | ||
| 419 | children: [{ label: '涂层工艺' }, { label: '三层夹色工艺' }] | ||
| 420 | }, | ||
| 421 | { | ||
| 422 | label: '材质', | ||
| 423 | id: '164', | ||
| 424 | children: [{ label: '硅水凝胶' }, { label: '水凝胶' }] | ||
| 425 | }, | ||
| 426 | { | ||
| 427 | label: '含水量', | ||
| 428 | id: '174', | ||
| 429 | children: [ | ||
| 430 | { label: '0-40%' }, | ||
| 431 | { label: '40-44%' }, | ||
| 432 | { label: '45%以上' } | ||
| 433 | ] | ||
| 434 | }, | ||
| 435 | { | ||
| 436 | label: '基弧', | ||
| 437 | id: '178', | ||
| 438 | children: [{ label: '0.0-8.4' }, { label: '8.4以上' }] | ||
| 439 | }, | ||
| 440 | { | ||
| 441 | label: '直径', | ||
| 442 | id: '181', | ||
| 443 | children: [{ label: '13.4-14' }, { label: '14以上' }] | ||
| 444 | }, | ||
| 445 | { | ||
| 446 | label: '中心厚度', | ||
| 447 | id: '184', | ||
| 448 | children: [ | ||
| 449 | { label: '0.0 - 0.03' }, | ||
| 450 | { label: '0.04 - 0.09' }, | ||
| 451 | { label: '0.1以上' } | ||
| 452 | ] | ||
| 453 | }, | ||
| 454 | { label: '销售保障', id: '253', children: [] }, | ||
| 455 | { label: '赠品', id: '260', children: [] } | ||
| 456 | ] | ||
| 457 | }, | ||
| 458 | { | ||
| 459 | label: '特种镜', | ||
| 460 | id: '146', | ||
| 461 | children: [ | ||
| 462 | { | ||
| 463 | label: '镜面颜色', | ||
| 464 | id: '237', | ||
| 465 | children: [{ label: '透明' }, { label: '亮金色' }] | ||
| 466 | }, | ||
| 467 | { | ||
| 468 | label: '品牌', | ||
| 469 | id: '238', | ||
| 470 | children: [{ label: '宁哥牌' }, { label: '秀野牌' }] | ||
| 471 | }, | ||
| 472 | { | ||
| 473 | label: '销售保障', | ||
| 474 | id: '254', | ||
| 475 | children: [{ label: '包退' }, { label: '包换' }] | ||
| 476 | }, | ||
| 477 | { | ||
| 478 | label: '功能', | ||
| 479 | id: '268', | ||
| 480 | children: [ | ||
| 481 | { label: '防风镜' }, | ||
| 482 | { label: '防爆溅工作镜' }, | ||
| 483 | { label: '泳镜' }, | ||
| 484 | { label: '智能镜' } | ||
| 485 | ] | ||
| 486 | } | ||
| 487 | ] | ||
| 488 | } | ||
| 489 | ], | ||
| 490 | defaultProps: { | ||
| 491 | children: 'children', | ||
| 492 | label: 'label' | ||
| 493 | } | 64 | } |
| 494 | } | 65 | } |
| 495 | }, | 66 | }, |
| 496 | methods: { | 67 | methods: { |
| 497 | getCheckedNodes() { | 68 | onSubmit() { |
| 498 | console.log(this.$refs.tree.getCheckedNodes()) | 69 | this.$message('submit!') |
| 499 | }, | ||
| 500 | getCheckedKeys() { | ||
| 501 | console.log(this.$refs.tree.getCheckedKeys()) | ||
| 502 | }, | ||
| 503 | addNode() { | ||
| 504 | let h | ||
| 505 | this.$message({ | ||
| 506 | message: h('p', null, [ | ||
| 507 | h('span', null, '添加一个新节点 ') | ||
| 508 | // h("i", { style: "color: teal" }, "VNode") | ||
| 509 | ]) | ||
| 510 | }) | ||
| 511 | }, | ||
| 512 | append(data) { | ||
| 513 | const newChild = { id: id++, label: 'testtest', children: [] } | ||
| 514 | if (!data.children) { | ||
| 515 | this.$set(data, 'children', []) | ||
| 516 | } | ||
| 517 | data.children.push(newChild) | ||
| 518 | }, | ||
| 519 | remove(node, data) { | ||
| 520 | // 删除 | ||
| 521 | const parent = node.parent | ||
| 522 | const children = parent.data.children || parent.data | ||
| 523 | const index = children.findIndex(d => d.id === data.id) | ||
| 524 | children.splice(index, 1) | ||
| 525 | }, | ||
| 526 | rightKey(node, data) { | ||
| 527 | // 右键 | ||
| 528 | const h = this.$createElement | ||
| 529 | // console.log(data, this.$refs.tree); | ||
| 530 | this.$message({ | ||
| 531 | message: h('p', null, [ | ||
| 532 | h('span', null, '右键了啊！ ' + node + data), | ||
| 533 | h('i', { style: 'color: teal' }, 'VNode') | ||
| 534 | ]) | ||
| 535 | }) | ||
| 536 | }, | ||
| 537 | update(node, data) { | ||
| 538 | // 更新 | ||
| 539 | const h = this.$createElement | ||
| 540 | this.$message({ | ||
| 541 | message: h('p', null, [ | ||
| 542 | h('span', null, '内容可以是 '), | ||
| 543 | h('i', { style: 'color: teal' }, 'VNode') | ||
| 544 | ]) | ||
| 545 | }) | ||
| 546 | }, | ||
| 547 | setCheckedNodes() { |
src/views/login/index.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="login-container"> | 2 | <div class="login-container"> |
| 3 | <el-form | 3 | <el-form |
| 4 | ref="loginForm" | 4 | ref="loginForm" |
| 5 | :model="loginForm" | 5 | :model="loginForm" |
| 6 | :rules="loginRules" | 6 | :rules="loginRules" |
| 7 | class="login-form" | 7 | class="login-form" |
| 8 | autocomplete="on" | 8 | autocomplete="on" |
| 9 | label-position="left" | 9 | label-position="left" |
| 10 | > | 10 | > |
| 11 | <div class="title-container"> | 11 | <div class="title-container"> |
| 12 | <h3 class="title">{{ $t('login.title') }}</h3> | 12 | <h3 class="title">{{ $t('login.title') }}</h3> |
| 13 | <lang-select class="set-language" /> | 13 | <lang-select class="set-language" /> |
| 14 | </div> | 14 | </div> |
| 15 | 15 | ||
| 16 | <el-form-item prop="username"> | 16 | <el-form-item prop="username"> |
| 17 | <span class="svg-container"> | 17 | <span class="svg-container"> |
| 18 | <svg-icon icon-class="user" /> | 18 | <svg-icon icon-class="user" /> |
| 19 | </span> | 19 | </span> |
| 20 | <el-input | 20 | <el-input |
| 21 | ref="username" | 21 | ref="username" |
| 22 | v-model="loginForm.username" | 22 | v-model="loginForm.username" |
| 23 | :placeholder="$t('login.username')" | 23 | :placeholder="$t('login.username')" |
| 24 | name="username" | 24 | name="username" |
| 25 | type="text" | 25 | type="text" |
| 26 | tabindex="1" | 26 | tabindex="1" |
| 27 | autocomplete="on" | 27 | autocomplete="on" |
| 28 | /> | 28 | /> |
| 29 | </el-form-item> | 29 | </el-form-item> |
| 30 | 30 | ||
| 31 | <el-tooltip | 31 | <el-tooltip |
| 32 | v-model="capsTooltip" | 32 | v-model="capsTooltip" |
| 33 | content="Caps lock is On" | 33 | content="Caps lock is On" |
| 34 | placement="right" | 34 | placement="right" |
| 35 | manual | 35 | manual |
| 36 | > | 36 | > |
| 37 | <el-form-item prop="password"> | 37 | <el-form-item prop="password"> |
| 38 | <span class="svg-container"> | 38 | <span class="svg-container"> |
| 39 | <svg-icon icon-class="password" /> | 39 | <svg-icon icon-class="password" /> |
| 40 | </span> | 40 | </span> |
| 41 | <el-input | 41 | <el-input |
| 42 | :key="passwordType" | 42 | :key="passwordType" |
| 43 | ref="password" | 43 | ref="password" |
| 44 | v-model="loginForm.password" | 44 | v-model="loginForm.password" |
| 45 | :type="passwordType" | 45 | :type="passwordType" |
| 46 | :placeholder="$t('login.password')" | 46 | :placeholder="$t('login.password')" |
| 47 | name="password" | 47 | name="password" |
| 48 | tabindex="2" | 48 | tabindex="2" |
| 49 | autocomplete="on" | 49 | autocomplete="on" |
| 50 | @keyup.native="checkCapslock" | 50 | @keyup.native="checkCapslock" |
| 51 | @blur="capsTooltip = false" | 51 | @blur="capsTooltip = false" |
| 52 | @keyup.enter.native="handleLogin" | 52 | @keyup.enter.native="handleLogin" |
| 53 | /> | 53 | /> |
| 54 | <span | 54 | <span |
| 55 | class="show-pwd" | 55 | class="show-pwd" |
| 56 | @click="showPwd" | 56 | @click="showPwd" |
| 57 | > | 57 | > |
| 58 | <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> | 58 | <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> |
| 59 | </span> | 59 | </span> |
| 60 | </el-form-item> | 60 | </el-form-item> |
| 61 | </el-tooltip> | 61 | </el-tooltip> |
| 62 | <div style="position:relative;text-align:right;height:30px;line-height:30px;border:0px #000 solid;margin-top:-20px;"> | 62 | <div style="position:relative;text-align:right;height:30px;line-height:30px;border:0px #000 solid;margin-top:-20px;"> |
| 63 | <!-- <el-checkbox v-model="checked">{{$t('rememberpassword')}}</el-checkbox> --> | 63 | <!-- <el-checkbox v-model="checked">{{$t('rememberpassword')}}</el-checkbox> --> |
| 64 | <el-link type="primary">{{ $t('login.forgetpassword') }}</el-link> | 64 | <el-link type="primary">{{ $t('login.forgetpassword') }}</el-link> |
| 65 | <el-link type="primary">{{ $t('login.signup') }}</el-link> | 65 | <el-link type="primary">{{ $t('login.signup') }}</el-link> |
| 66 | </div> | 66 | </div> |
| 67 | <el-button | 67 | <el-button |
| 68 | :loading="loading" | 68 | :loading="loading" |
| 69 | type="primary" | 69 | type="primary" |
| 70 | style="width:100%;" | 70 | style="width:100%;" |
| 71 | @click.native.prevent="handleLogin" | 71 | @click.native.prevent="handleLogin" |
| 72 | >{{ $t('login.logIn') }}</el-button> | 72 | >{{ $t('login.logIn') }}</el-button> |
| 73 | <div style="position:relative;text-align:right;height:30px;line-height:30px;border:0px #000 solid;margin-bottom:30px;"> | 73 | <div style="position:relative;text-align:right;height:30px;line-height:30px;border:0px #000 solid;margin-bottom:30px;"> |
| 74 | <div class="tips"> | 74 | <div class="tips"> |
| 75 | <el-button | 75 | <el-button |
| 76 | class="thirdparty-button" | 76 | class="thirdparty-button" |
| 77 | type="primary" | 77 | type="primary" |
| 78 | @click="showDialog=true" | 78 | @click="showDialog=true" |
| 79 | >{{ $t('login.thirdparty') }}</el-button> | 79 | >{{ $t('login.thirdparty') }}</el-button> |
| 80 | </div> | 80 | </div> |
| 81 | <!-- <div class="tips"> | 81 | <!-- <div class="tips"> |
| 82 | <span style="margin-right:18px;">{{ $t('login.username') }} : runner</span> | 82 | <span style="margin-right:18px;">{{ $t('login.username') }} : runner</span> |
| 83 | <el-link type="primary">{{ $t('login.signup') }}</el-link> | 83 | <el-link type="primary">{{ $t('login.signup') }}</el-link> |
| 84 | </div> --> | 84 | </div> --> |
| 85 | </div> | 85 | </div> |
| 86 | <div style="position:relative"> | 86 | <!-- <div style="position:relative"> --> |
| 87 | <!-- <div class="tips"> | 87 | <!-- <div class="tips"> |
| 88 | <span>{{ $t('login.username') }} : admin</span> | 88 | <span>{{ $t('login.username') }} : admin</span> |
| 89 | <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span> | 89 | <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span> |
| 90 | </div> | 90 | </div> |
| 91 | <div class="tips"> | 91 | <div class="tips"> |
| 92 | <span style="margin-right:18px;">{{ $t('login.username') }} : assistant</span> | 92 | <span style="margin-right:18px;">{{ $t('login.username') }} : assistant</span> |
| 93 | <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span> | 93 | <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span> |
| 94 | </div> | 94 | </div> |
| 95 | <div class="tips"> | 95 | <div class="tips"> |
| 96 | <span style="margin-right:18px;">{{ $t('login.username') }} : runner</span> | 96 | <span style="margin-right:18px;">{{ $t('login.username') }} : runner</span> |
| 97 | <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span> | 97 | <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span> |
| 98 | </div> | 98 | </div> |
| 99 | <div class="tips"> | 99 | <div class="tips"> |
| 100 | <span style="margin-right:18px;">{{ $t('login.username') }} : shoper</span> | 100 | <span style="margin-right:18px;">{{ $t('login.username') }} : shoper</span> |
| 101 | <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span> | 101 | <span>{{ $t('login.password') }} : {{ $t('login.any') }}</span> |
| 102 | </div> --> | 102 | </div> --> |
| 103 | </div> | 103 | <!-- </div> --> |
| 104 | </el-form> | 104 | </el-form> |
| 105 | 105 | ||
| 106 | <el-dialog | 106 | <el-dialog |
| 107 | :title="$t('login.thirdparty')" | 107 | :title="$t('login.thirdparty')" |
| 108 | :visible.sync="showDialog" | 108 | :visible.sync="showDialog" |
| 109 | > | 109 | > |
| 110 | {{ $t('login.thirdpartyTips') }} | 110 | {{ $t('login.thirdpartyTips') }} |
| 111 | <br> | 111 | <br> |
| 112 | <br> | 112 | <br> |
| 113 | <br> | 113 | <br> |
| 114 | <social-sign /> | 114 | <social-sign /> |
| 115 | </el-dialog> | 115 | </el-dialog> |
| 116 | <!-- <vfd></vfd> --> | 116 | <!-- <vfd></vfd> --> |
| 117 | </div> | 117 | </div> |
| 118 | </template> | 118 | </template> |
| 119 | 119 | ||
| 120 | <script> | 120 | <script> |
| 121 | import { validUsername } from '@/utils/validate' | 121 | import { validUsername } from '@/utils/validate' |
| 122 | import LangSelect from '@/components/LangSelect' | 122 | import LangSelect from '@/components/LangSelect' |
| 123 | import SocialSign from './components/SocialSignin' | 123 | import SocialSign from './components/SocialSignin' |
| 124 | // import vfd from "vfd"; | 124 | // import vfd from "vfd"; |
| 125 | export default { | 125 | export default { |
| 126 | name: 'Login', | 126 | name: 'Login', |
| 127 | // components: { LangSelect, SocialSign, vfd }, | 127 | // components: { LangSelect, SocialSign, vfd }, |
| 128 | components: { LangSelect, SocialSign }, | 128 | components: { LangSelect, SocialSign }, |
| 129 | data() { | 129 | data() { |
| 130 | const validateUsername = (rule, value, callback) => { | 130 | const validateUsername = (rule, value, callback) => { |
| 131 | if (!validUsername(value)) { | 131 | if (!validUsername(value)) { |
| 132 | callback(new Error('Please enter the correct user name')) | 132 | callback(new Error('Please enter the correct user name')) |
| 133 | } else { | 133 | } else { |
| 134 | callback() | 134 | callback() |
| 135 | } | 135 | } |
| 136 | } | 136 | } |
| 137 | const validatePassword = (rule, value, callback) => { | 137 | const validatePassword = (rule, value, callback) => { |
| 138 | if (value.length < 6) { | 138 | if (value.length < 6) { |
| 139 | callback(new Error('The password can not be less than 6 digits')) | 139 | callback(new Error('The password can not be less than 6 digits')) |
| 140 | } else { | 140 | } else { |
| 141 | callback() | 141 | callback() |
| 142 | } | 142 | } |
| 143 | } | 143 | } |
| 144 | return { | 144 | return { |
| 145 | loginForm: { | 145 | loginForm: { |
| 146 | username: 'admin', | 146 | username: 'admin', |
| 147 | password: '111111' | 147 | password: '111111' |
| 148 | }, | 148 | }, |
| 149 | loginRules: { | 149 | loginRules: { |
| 150 | username: [ | 150 | username: [ |
| 151 | { required: true, trigger: 'blur', validator: validateUsername } | 151 | { required: true, trigger: 'blur', validator: validateUsername } |
| 152 | ], | 152 | ], |
| 153 | password: [ | 153 | password: [ |
| 154 | { required: true, trigger: 'blur', validator: validatePassword } | 154 | { required: true, trigger: 'blur', validator: validatePassword } |
| 155 | ] | 155 | ] |
| 156 | }, | 156 | }, |
| 157 | passwordType: 'password', | 157 | passwordType: 'password', |
| 158 | capsTooltip: false, | 158 | capsTooltip: false, |
| 159 | loading: false, | 159 | loading: false, |
| 160 | showDialog: false, | 160 | showDialog: false, |
| 161 | redirect: undefined, | 161 | redirect: undefined, |
| 162 | otherQuery: {} | 162 | otherQuery: {} |
| 163 | } | 163 | } |
| 164 | }, | 164 | }, |
| 165 | watch: { | 165 | watch: { |
| 166 | $route: { | 166 | $route: { |
| 167 | handler: function(route) { | 167 | handler: function(route) { |
| 168 | const query = route.query | 168 | const query = route.query |
| 169 | if (query) { | 169 | if (query) { |
| 170 | this.redirect = query.redirect | 170 | this.redirect = query.redirect |
| 171 | this.otherQuery = this.getOtherQuery(query) | 171 | this.otherQuery = this.getOtherQuery(query) |
| 172 | } | 172 | } |
| 173 | }, | 173 | }, |
| 174 | immediate: true | 174 | immediate: true |
| 175 | } | 175 | } |
| 176 | }, | 176 | }, |
| 177 | created() { | 177 | created() { |
| 178 | // window.addEventListener('storage', this.afterQRScan) | 178 | // window.addEventListener('storage', this.afterQRScan) |
| 179 | }, | 179 | }, |
| 180 | mounted() { | 180 | mounted() { |
| 181 | if (this.loginForm.username === '') { | 181 | if (this.loginForm.username === '') { |
| 182 | this.$refs.username.focus() | 182 | this.$refs.username.focus() |
| 183 | } else if (this.loginForm.password === '') { | 183 | } else if (this.loginForm.password === '') { |
| 184 | this.$refs.password.focus() | 184 | this.$refs.password.focus() |
| 185 | } | 185 | } |
| 186 | }, | 186 | }, |
| 187 | destroyed() { | 187 | destroyed() { |
| 188 | // window.removeEventListener('storage', this.afterQRScan) | 188 | // window.removeEventListener('storage', this.afterQRScan) |
| 189 | }, | 189 | }, |
| 190 | methods: { | 190 | methods: { |
| 191 | checkCapslock(e) { | 191 | checkCapslock(e) { |
| 192 | const { key } = e | 192 | const { key } = e |
| 193 | this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z' | 193 | this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z' |
| 194 | }, | 194 | }, |
| 195 | showPwd() { | 195 | showPwd() { |
| 196 | if (this.passwordType === 'password') { | 196 | if (this.passwordType === 'password') { |
| 197 | this.passwordType = '' | 197 | this.passwordType = '' |
| 198 | } else { | 198 | } else { |
| 199 | this.passwordType = 'password' | 199 | this.passwordType = 'password' |
| 200 | } | 200 | } |
| 201 | this.$nextTick(() => { | 201 | this.$nextTick(() => { |
| 202 | this.$refs.password.focus() | 202 | this.$refs.password.focus() |
| 203 | }) | 203 | }) |
| 204 | }, | 204 | }, |
| 205 | handleLogin() { | 205 | handleLogin() { |
| 206 | this.$refs.loginForm.validate(valid => { | 206 | this.$refs.loginForm.validate(valid => { |
| 207 | if (valid) { | 207 | if (valid) { |
| 208 | this.loading = true | 208 | this.loading = true |
| 209 | this.$store | 209 | this.$store |
| 210 | .dispatch('user/login', this.loginForm) | 210 | .dispatch('user/login', this.loginForm) |
| 211 | .then(() => { | 211 | .then(() => { |
| 212 | this.$router.push({ | 212 | this.$router.push({ |
| 213 | path: this.redirect || '/', | 213 | path: this.redirect || '/', |
| 214 | query: this.otherQuery | 214 | query: this.otherQuery |
| 215 | }) | 215 | }) |
| 216 | this.loading = false | 216 | this.loading = false |
| 217 | }) | 217 | }) |
| 218 | .catch(() => { | 218 | .catch(() => { |
| 219 | this.loading = false | 219 | this.loading = false |
| 220 | }) | 220 | }) |
| 221 | } else { | 221 | } else { |
| 222 | console.log('error submit!!') | 222 | console.log('error submit!!') |
| 223 | return false | 223 | return false |
| 224 | } | 224 | } |
| 225 | }) | 225 | }) |
| 226 | }, | 226 | }, |
| 227 | getOtherQuery(query) { | 227 | getOtherQuery(query) { |
| 228 | return Object.keys(query).reduce((acc, cur) => { | 228 | return Object.keys(query).reduce((acc, cur) => { |
| 229 | if (cur !== 'redirect') { | 229 | if (cur !== 'redirect') { |
| 230 | acc[cur] = query[cur] | 230 | acc[cur] = query[cur] |
| 231 | } | 231 | } |
| 232 | return acc | 232 | return acc |
| 233 | }, {}) | 233 | }, {}) |
| 234 | } | 234 | } |
| 235 | // afterQRScan() { | 235 | // afterQRScan() { |
| 236 | // if (e.key === 'x-admin-oauth-code') { | 236 | // if (e.key === 'x-admin-oauth-code') { |
| 237 | // const code = getQueryObject(e.newValue) | 237 | // const code = getQueryObject(e.newValue) |
| 238 | // const codeMap = { | 238 | // const codeMap = { |
| 239 | // wechat: 'code', | 239 | // wechat: 'code', |
| 240 | // tencent: 'code' | 240 | // tencent: 'code' |
| 241 | // } | 241 | // } |
| 242 | // const type = codeMap[this.auth_type] | 242 | // const type = codeMap[this.auth_type] |
| 243 | // const codeName = code[type] | 243 | // const codeName = code[type] |
| 244 | // if (codeName) { | 244 | // if (codeName) { |
| 245 | // this.$store.dispatch('LoginByThirdparty', codeName).then(() => { | 245 | // this.$store.dispatch('LoginByThirdparty', codeName).then(() => { |
| 246 | // this.$router.push({ path: this.redirect || '/' }) | 246 | // this.$router.push({ path: this.redirect || '/' }) |
| 247 | // }) | 247 | // }) |
| 248 | // } else { | 248 | // } else { |
| 249 | // alert('第三方登录失败') | 249 | // alert('第三方登录失败') |
| 250 | // } | 250 | // } |
| 251 | // } | 251 | // } |
| 252 | // } | 252 | // } |
| 253 | } | 253 | } |
| 254 | } | 254 | } |
| 255 | </script> | 255 | </script> |
| 256 | 256 | ||
| 257 | <style lang="scss"> | 257 | <style lang="scss"> |
| 258 | /* 修复input 背景不协调 和光标变色 */ | 258 | /* 修复input 背景不协调 和光标变色 */ |
| 259 | /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */ | 259 | /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */ |
| 260 | 260 | ||
| 261 | $bg: #283443; | 261 | $bg: #283443; |
| 262 | $light_gray: #fff; | 262 | $light_gray: #fff; |
| 263 | $cursor: #fff; | 263 | $cursor: #fff; |
| 264 | 264 | ||
| 265 | @supports (-webkit-mask: none) and (not (cater-color: $cursor)) { | 265 | @supports (-webkit-mask: none) and (not (cater-color: $cursor)) { |
| 266 | .login-container .el-input input { | 266 | .login-container .el-input input { |
| 267 | color: $cursor; | 267 | color: $cursor; |
| 268 | } | 268 | } |
| 269 | } | 269 | } |
| 270 | 270 | ||
| 271 | /* reset element-ui css */ | 271 | /* reset element-ui css */ |
| 272 | .login-container { | 272 | .login-container { |
| 273 | .el-input { | 273 | .el-input { |
| 274 | display: inline-block; | 274 | display: inline-block; |
| 275 | height: 47px; | 275 | height: 47px; |
| 276 | width: 85%; | 276 | width: 85%; |
| 277 | 277 | ||
| 278 | input { | 278 | input { |
| 279 | background: transparent; | 279 | background: transparent; |
| 280 | border: 0px; | 280 | border: 0px; |
| 281 | -webkit-appearance: none; | 281 | -webkit-appearance: none; |
| 282 | border-radius: 0px; | 282 | border-radius: 0px; |
| 283 | padding: 12px 5px 12px 15px; | 283 | padding: 12px 5px 12px 15px; |
| 284 | color: $light_gray; | 284 | color: $light_gray; |
| 285 | height: 47px; | 285 | height: 47px; |
| 286 | caret-color: $cursor; | 286 | caret-color: $cursor; |
| 287 | 287 | ||
| 288 | &:-webkit-autofill { | 288 | &:-webkit-autofill { |
| 289 | box-shadow: 0 0 0px 1000px $bg inset !important; | 289 | box-shadow: 0 0 0px 1000px $bg inset !important; |
| 290 | -webkit-text-fill-color: $cursor !important; | 290 | -webkit-text-fill-color: $cursor !important; |
| 291 | } | 291 | } |
| 292 | } | 292 | } |
| 293 | } | 293 | } |
| 294 | 294 | ||
| 295 | .el-form-item { | 295 | .el-form-item { |
| 296 | border: 1px solid rgba(255, 255, 255, 0.1); | 296 | border: 1px solid rgba(255, 255, 255, 0.1); |
| 297 | background: rgba(0, 0, 0, 0.1); | 297 | background: rgba(0, 0, 0, 0.1); |
| 298 | border-radius: 5px; | 298 | border-radius: 5px; |
| 299 | color: #454545; | 299 | color: #454545; |
| 300 | } | 300 | } |
| 301 | } | 301 | } |
| 302 | </style> | 302 | </style> |
| 303 | 303 | ||
| 304 | <style lang="scss" scoped> | 304 | <style lang="scss" scoped> |
| 305 | $bg: #2d3a4b; | 305 | $bg: #2d3a4b; |
| 306 | $dark_gray: #889aa4; | 306 | $dark_gray: #889aa4; |
| 307 | $light_gray: #eee; | 307 | $light_gray: #eee; |
| 308 | 308 | ||
| 309 | .login-container { | 309 | .login-container { |
| 310 | min-height: 100%; | 310 | min-height: 100%; |
| 311 | width: 100%; | 311 | width: 100%; |
| 312 | background-color: $bg; | 312 | background-color: $bg; |
| 313 | overflow: hidden; | 313 | overflow: hidden; |
| 314 | 314 | ||
| 315 | .login-form { | 315 | .login-form { |
| 316 | position: relative; | 316 | position: relative; |
| 317 | width: 520px; | 317 | width: 520px; |
| 318 | max-width: 100%; | 318 | max-width: 100%; |
| 319 | padding: 160px 35px 0; | 319 | padding: 160px 35px 0; |
| 320 | margin: 0 auto; | 320 | margin: 0 auto; |
| 321 | overflow: hidden; | 321 | overflow: hidden; |
| 322 | } | 322 | } |
| 323 | 323 | ||
| 324 | .tips { | 324 | .tips { |
| 325 | font-size: 14px; | 325 | font-size: 14px; |
| 326 | color: #fff; | 326 | color: #fff; |
| 327 | margin-bottom: 10px; | 327 | margin-bottom: 10px; |
| 328 | 328 | ||
| 329 | span { | 329 | span { |
| 330 | &:first-of-type { | 330 | &:first-of-type { |
| 331 | margin-right: 16px; | 331 | margin-right: 16px; |
| 332 | } | 332 | } |
| 333 | } | 333 | } |
| 334 | } | 334 | } |
| 335 | 335 | ||
| 336 | .svg-container { | 336 | .svg-container { |
| 337 | padding: 6px 5px 6px 15px; | 337 | padding: 6px 5px 6px 15px; |
| 338 | color: $dark_gray; | 338 | color: $dark_gray; |
| 339 | vertical-align: middle; | 339 | vertical-align: middle; |
| 340 | width: 30px; | 340 | width: 30px; |
| 341 | display: inline-block; | 341 | display: inline-block; |
| 342 | } | 342 | } |
| 343 | 343 | ||
| 344 | .title-container { | 344 | .title-container { |
| 345 | position: relative; | 345 | position: relative; |
| 346 | 346 | ||
| 347 | .title { | 347 | .title { |
| 348 | font-size: 26px; | 348 | font-size: 26px; |
| 349 | color: $light_gray; | 349 | color: $light_gray; |
| 350 | margin: 0px auto 40px auto; | 350 | margin: 0px auto 40px auto; |
| 351 | text-align: center; | 351 | text-align: center; |
| 352 | font-weight: bold; | 352 | font-weight: bold; |
| 353 | } | 353 | } |
| 354 | 354 | ||
| 355 | .set-language { | 355 | .set-language { |
| 356 | color: #fff; | 356 | color: #fff; |
| 357 | position: absolute; | 357 | position: absolute; |
| 358 | top: 3px; | 358 | top: 3px; |
| 359 | font-size: 18px; | 359 | font-size: 18px; |
| 360 | right: 0px; | 360 | right: 0px; |
| 361 | cursor: pointer; | 361 | cursor: pointer; |
| 362 | } | 362 | } |
| 363 | } | 363 | } |
| 364 | 364 | ||
| 365 | .show-pwd { | 365 | .show-pwd { |
| 366 | position: absolute; | 366 | position: absolute; |
| 367 | right: 10px; | 367 | right: 10px; |
| 368 | top: 7px; | 368 | top: 7px; |
| 369 | font-size: 16px; | 369 | font-size: 16px; |
| 370 | color: $dark_gray; | 370 | color: $dark_gray; |
| 371 | cursor: pointer; | 371 | cursor: pointer; |
| 372 | user-select: none; | 372 | user-select: none; |
| 373 | } | 373 | } |
| 374 | 374 | ||
| 375 | .thirdparty-button { | 375 | .thirdparty-button { |
| 376 | position: absolute; | 376 | position: absolute; |
| 377 | right: 0; | 377 | right: 0; |
| 378 | bottom: 6px; | 378 | bottom: 6px; |
| 379 | } | 379 | } |
| 380 | 380 | ||
| 381 | @media only screen and (max-width: 470px) { | 381 | @media only screen and (max-width: 470px) { |
| 382 | .thirdparty-button { | 382 | .thirdparty-button { |
| 383 | display: none; | 383 | display: none; |
| 384 | } | 384 | } |
| 385 | } | 385 | } |
| 386 | } | 386 | } |
| 387 | </style> | 387 | </style> |
| 388 | 388 |