Skip to content

H
hls-easy-ui
Commit 2f60ffcd authored by Hello's avatar Hello
Browse files
Options

switch组件样式冲突修改

parent 2030e2cf
Show whitespace changes
Inline Side-by-side
Showing with 58 additions and 103 deletions
package.json
View file @ 2f60ffcd
{ {
"name": "hls-easy-ui", "name": "hls-easy-ui",
"version": "0.0.6", "version": "0.0.7",
"description": "A Vue components project", "description": "A Vue components project",
"author": "JingChao <jingchao.wu@hand-china.com>", "author": "JingChao <jingchao.wu@hand-china.com>",
"private": false, "private": false,
......
packages/common/styles/ionic.less
View file @ 2f60ffcd
...@@ -4967,14 +4967,14 @@ input:checked + .checkbox-icon:before { ...@@ -4967,14 +4967,14 @@ input:checked + .checkbox-icon:before {
position: relative; position: relative;
display: inline-block; display: inline-block;
pointer-events: auto; pointer-events: auto;
margin: -2.5px; //margin: -2.5px;
padding: 2.5px; //padding: 2.5px;
} }
.toggle input:checked + .track { /*.toggle input:checked + .track {
border-color: #4cd964; border-color: #4cd964;
background-color: #4cd964; background-color: #4cd964;
} }*/
.toggle.dragging .handle { .toggle.dragging .handle {
background-color: #f2f2f2 !important; background-color: #f2f2f2 !important;
...@@ -4990,10 +4990,10 @@ input:checked + .checkbox-icon:before { ...@@ -4990,10 +4990,10 @@ input:checked + .checkbox-icon:before {
background-color: #b2b2b2; background-color: #b2b2b2;
} }
.toggle.toggle-positive input:checked + .track { /*.toggle.toggle-positive input:checked + .track {
border-color: #387ef5; border-color: #387ef5;
background-color: #387ef5; background-color: #387ef5;
} }*/
.toggle.toggle-calm input:checked + .track { .toggle.toggle-calm input:checked + .track {
border-color: #11c1f3; border-color: #11c1f3;
...@@ -5039,8 +5039,8 @@ input:checked + .checkbox-icon:before { ...@@ -5039,8 +5039,8 @@ input:checked + .checkbox-icon:before {
transition-property: background-color, border; transition-property: background-color, border;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
width: 51px; width: 40px;
height: 31px; height: 23px;
border: solid 1px #e6e6e6; /*no*/ border: solid 1px #e6e6e6; /*no*/
border-radius: 20px; border-radius: 20px;
background-color: #fff; background-color: #fff;
...@@ -5064,20 +5064,20 @@ input:checked + .checkbox-icon:before { ...@@ -5064,20 +5064,20 @@ input:checked + .checkbox-icon:before {
transition-property: background-color, transform; transition-property: background-color, transform;
position: absolute; position: absolute;
display: block; display: block;
width: 27px; width: 21px;
height: 27px; height: 21px;
border-radius: 27px; border-radius: 21px;
background-color: #fff; background-color: #fff;
top: 7px; top: 1px;
left: 7px; left: 1px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.15);
} }
.toggle .handle:before { .toggle .handle:before {
position: absolute; position: absolute;
top: -1px; //top: -1px;
left: -22px; //left: -22px;
padding: 18px 34px; //padding: 18px 34px;
content: " "; content: " ";
} }
......
packages/components/ListItem/Item.vue
View file @ 2f60ffcd
...@@ -209,64 +209,7 @@ export default { ...@@ -209,64 +209,7 @@ export default {
margin-left: 5px; margin-left: 5px;
height: 10px; height: 10px;
} }
//toggle
.toggle-check {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: center;
align-items: center;
.track {
width: 40px;
height: 25px;
margin-right: 2.5px;
border-radius: 15px;
.handle {
width: 22.5px;
height: 22.5px;
top: 3.5px;
left: 2.5px;
}
}
}
.toggle.toggle-positive input:checked + .track {
border-color: @switch-box-bg;
background-color: @switch-box-bg;
.handle {
width: 22.5px;
height: 22.5px;
top: 3.5px;
left: 9px;
} }
} }
} }
}
}
@media (device-width: 320px) and (device-height: 568px) {
.hls-item{
.contents{
.add-content{
.toggle-check {
.track {
.handle{
top:4px
}
}
}
.toggle.toggle-positive input:checked + .track{
.handle {
top:4px
}
}
}
}
}
}
</style> </style>
packages/components/Select/README.md
View file @ 2f60ffcd
...@@ -143,3 +143,34 @@ SelectField 下拉组建 ...@@ -143,3 +143,34 @@ SelectField 下拉组建
|rightIcon|自定义下拉箭头|String|N|-| |rightIcon|自定义下拉箭头|String|N|-|
|@onSelect|下拉框选中函数|Function|N|-| |@onSelect|下拉框选中函数|Function|N|-|
SelectField 下拉组建
```html
<h-select v-model="sex" look-up-code="HLPJ_PROPERTY_TYPE" label="资产类型" required/>
data () {
return {
sex: 0
}
}
```
|字段名称 |字段说明 |类型 |必填 |默认 |
| ----|------|-------|------|------|
|value|当前值|string|Y|-|
|dataArray|下拉框数据源|Array|Y|-|
|multiple|是否多选|Boolean|N|false|
|disabled|是否禁用|Boolean|N|false|
|valueKey|对应数据源中的存表字端|String|N|code|
|valueName|对应数据源中的展示字端|String|N|code_name|
|label|字端名称|String|Y|-|
|required|必输|Boolean|N|false|
|proportion|字端明与字端占比|Array|N|[1,2]|
|itemHeight|字端默认高度|Number|N|45|
|hasBorder|是否有下边框|Boolean|N|true|
|showIcon|右边下拉箭头|Boolean|N|true|
|rightIcon|自定义下拉箭头|String|N|-|
|@onSelect|下拉框选中函数|Function|N|-|
|look-up-code|值集代码|String|N|-|
|lov-code|lov代码|String|N|-|
packages/components/Switch/index.vue
View file @ 2f60ffcd
...@@ -53,15 +53,16 @@ export default { ...@@ -53,15 +53,16 @@ export default {
.track { .track {
width: 40px; width: 40px;
height: 25px; height: 23px;
margin-right: 2.5px; //margin-right: 2.5px;
border-radius: 15px; border-radius: 20px;
.handle { .handle {
width: 22.5px; width: 21px;
height: 22.5px; height: 21px;
top: 3.5px; top: 1px;
left: 2.5px; left: 1px;
border-radius: 21px;
} }
} }
} }
...@@ -71,26 +72,7 @@ export default { ...@@ -71,26 +72,7 @@ export default {
background-color: @switch-box-bg; background-color: @switch-box-bg;
.handle { .handle {
width: 22.5px;
height: 22.5px;
top: 3.5px;
left: 9px; left: 9px;
} }
} }
@media (device-width: 320px) and (device-height: 568px) {
.toggle-check {
.track {
.handle {
top: 4px
}
}
.toggle.toggle-positive input:checked + .track {
.handle {
top: 4px
}
}
}
}
</style> </style>
src/pages/hlsPopup.vue
View file @ 2f60ffcd
...@@ -207,7 +207,7 @@ ...@@ -207,7 +207,7 @@
<item :show-arrow="true"> <item :show-arrow="true">
<img slot="left-icon" src="../assets/image/warning@2x.png" class="left-icon"> <img slot="left-icon" src="../assets/image/warning@2x.png" class="left-icon">
<div slot="name">保存照片</div> <div slot="name">保存照片</div>
<label slot="right" class="toggle toggle-positive toggle-check" @click="savePhotoFun"> <label slot="content" class="toggle toggle-positive toggle-check" @click="savePhotoFun">
<input :checked="savePhoto" type="checkbox"> <input :checked="savePhoto" type="checkbox">
<div class="track"> <div class="track">
<div class="handle"/> <div class="handle"/>
......
src/router/index.js
View file @ 2f60ffcd
...@@ -38,7 +38,7 @@ export default new Router({ ...@@ -38,7 +38,7 @@ export default new Router({
{path: '/demo', component: Demo, name: 'Demo', meta: {keepAlive: true}}, {path: '/demo', component: Demo, name: 'Demo', meta: {keepAlive: true}},
{path: '/home', component: Home, name: 'Home', meta: {keepAlive: false}}, {path: '/home', component: Home, name: 'Home', meta: {keepAlive: false}},
// test工具类 // test工具类
{path: '/hls-popup', component: HlsPopup, name: 'HlsPopup', meta: {keepAlive: false}}, {path: '/hlsPopup', component: HlsPopup, name: 'HlsPopup', meta: {keepAlive: false}},
{path: '/Radio', component: Radio, name: 'Radio', meta: {keepAlive: true}}, {path: '/Radio', component: Radio, name: 'Radio', meta: {keepAlive: true}},
{path: '/HFile', component: HFile, name: 'HFile', meta: {keepAlive: true}}, {path: '/HFile', component: HFile, name: 'HFile', meta: {keepAlive: true}},
{path: '/Form', component: Form, name: 'Form', meta: {keepAlive: true}}, {path: '/Form', component: Form, name: 'Form', meta: {keepAlive: true}},
...@@ -60,7 +60,6 @@ export default new Router({ ...@@ -60,7 +60,6 @@ export default new Router({
{path: '/checkBox', component: CheckBox, name: 'CheckBox', meta: {keepAlive: false}}, {path: '/checkBox', component: CheckBox, name: 'CheckBox', meta: {keepAlive: false}},
{path: '/dateField', component: DateField, name: 'DateField', meta: {keepAlive: false}}, {path: '/dateField', component: DateField, name: 'DateField', meta: {keepAlive: false}},
], ],
scrollBehavior (to, from, savedPosition) { scrollBehavior (to, from, savedPosition) {
if (to.hash) { if (to.hash) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment