Skip to content
项目
群组
代码片段
帮助
正在加载...
帮助
提交反馈
为 GitLab 提交贡献
登录
切换导航
P
pica-learning-report
项目
项目
详情
动态
版本
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
计划
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
收起侧边栏
Close sidebar
动态
分支图
统计图
创建新议题
作业
提交
议题看板
打开侧边栏
com.pica.cloud.education.frontend
pica-learning-report
提交
89be27a4
提交
89be27a4
编写于
12月 12, 2019
作者:
guangjun.yang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
删除备份的文件
上级
7484f2e4
变更
5
隐藏空白字符变更
内嵌
并排
正在显示
5 个修改的文件
包含
0 行增加
和
1369 行删除
+0
-1369
chart-column-vertical copy.vue
components/bussiness/charts/chart-column-vertical copy.vue
+0
-156
pica-org copy 2.vue
components/common/pica-org copy 2.vue
+0
-316
pica-org copy 3.vue
components/common/pica-org copy 3.vue
+0
-316
pica-org copy 4.vue
components/common/pica-org copy 4.vue
+0
-293
pica-org copy.vue
components/common/pica-org copy.vue
+0
-288
未找到文件。
components/bussiness/charts/chart-column-vertical copy.vue
已删除
100644 → 0
浏览文件 @
7484f2e4
<!-- 柱状图-竖向 -->
<
template
>
<section
class=
"chart-pie"
>
<div
:id=
"id"
:style=
"
{width: chartWidth, height: chartHeight}">
</div>
</section>
</
template
>
<
script
>
import
{
format
}
from
"path"
;
let
vm
=
null
;
export
default
{
props
:
{
id
:
{
type
:
String
,
default
:
"chartColumnId"
},
colors
:
{
type
:
Array
,
default
:
()
=>
[
"#FFB01B"
,
"#39AF9A"
,
"#5D7092"
,
"#FF9A4B"
,
"#abb7bb"
,
"#76d2d2"
]
}
},
data
()
{
return
{
chartWidth
:
"300px"
,
chartHeight
:
"235px"
};
},
created
()
{
if
(
process
.
client
)
{
let
clientWidth
=
window
.
outerWidth
||
document
.
body
.
clientWidth
||
document
.
documentElement
.
clientWidth
;
this
.
chartWidth
=
(
clientWidth
*
0.9
).
toFixed
(
0
)
+
'px'
;
console
.
log
(
clientWidth
);
// if (clientWidth
<=
320
)
{
// this.chartWidth = "260px";
// } else if (clientWidth
<=
360
)
{
// this.chartWidth = "320px";
// } else if (clientWidth
<=
375
)
{
// this.chartWidth = "340px";
// } else if (clientWidth
<=
414
)
{
// this.chartWidth = "375px";
// } else {
// this.chartWidth = (clientWidth * 0.8).toFixed(0) + 'px';
// }
}
},
mounted
()
{
vm
=
this
;
this
.
drawColumn
();
},
methods
:
{
// 画
drawColumn
()
{
// 基于准备好的dom,初始化echarts实例
let
chartColumn
=
this
.
$echarts
.
init
(
document
.
getElementById
(
this
.
id
));
// 绘制图表
let
options
=
{
color
:
vm
.
colors
,
tooltip
:
{
trigger
:
"axis"
,
axisPointer
:
{
// 坐标轴指示器,坐标轴触发有效
type
:
"shadow"
// 默认为直线,可选为:'line' | 'shadow'
}
},
// legend: {
// top: 20,
// data: ["获优秀人数", "获及格人数", "未获证人数"],
// textStyle: {
// fontSize: 12,
// // fontWeight: "bolder",
// color: "#676869"
// }
// },
grid
:
{
top
:
"10%"
,
left
:
"3%"
,
right
:
"6%"
,
bottom
:
"6%"
,
containLabel
:
true
},
lineStyle
:
{
color
:
"#676869"
},
yAxis
:
{
axisTick
:
false
,
type
:
"value"
,
axisLabel
:
{
formatter
:
"{value}"
,
textStyle
:
{
color
:
"#676869"
}
},
axisLine
:
{
lineStyle
:
{
color
:
"#efefef"
,
width
:
1
}
}
},
xAxis
:
{
axisTick
:
false
,
type
:
"category"
,
data
:
[
"其他"
,
"中专以下"
,
"大专"
,
"本科"
,
"硕士"
],
textStyle
:
{
fontSize
:
12
,
color
:
"#676869"
},
axisLabel
:
{
formatter
:
"{value}"
,
textStyle
:
{
color
:
"#676869"
}
},
axisLine
:
{
lineStyle
:
{
color
:
"#efefef"
,
width
:
1
}
}
},
series
:
[
{
name
:
"获优秀人数"
,
data
:
[
120
,
200
,
150
,
80
,
70
,
110
,
130
],
type
:
"bar"
,
barWidth
:
20
//柱图宽度
}
]
};
chartColumn
.
setOption
(
options
);
}
}
};
</
script
>
<
style
lang=
"scss"
scoped
>
.chart-pie
{
position
:
relative
;
top
:
-6px
;
// height: 280px;
margin
:
15px
;
background
:
rgba
(
255
,
255
,
255
,
1
);
box-shadow
:
0px
10px
30px
0px
rgba
(
0
,
0
,
0
,
0
.04
);
border-radius
:
6px
;
border
:
1px
solid
rgba
(
231
,
232
,
233
,
1
);
}
</
style
>
components/common/pica-org copy 2.vue
已删除
100644 → 0
浏览文件 @
7484f2e4
<!-- 选择地区组件 -->
<
template
>
<div
class=
"select-wrapper"
>
<div
class=
"mask"
@
click=
"cancel"
@
touchmove
.
prevent
>
<div
class=
"address-wrap"
@
click
.
stop
>
<div
class=
"tip-header"
>
<span
class=
"cancel-btn"
@
click=
"cancel"
>
取消
</span>
<h3>
选择机构
</h3>
<span
class=
"submit-btn"
@
click=
"confirm"
>
确定
</span>
<!--
<button
:disabled=
"isDisabled"
class=
"submit-btn"
@
click=
"confirm"
>
确定
</button>
-->
</div>
<div
class=
"address-select"
>
<ul
class=
"show-address-header"
>
<!--
<li
:class=
"
{ active: isShowProvince }" class="item" @click="tabAddressClick(1)"> -->
<li
:class=
"
{ active: isShowProvince }" class="item">
{{
value
.
provinceName
?
value
.
provinceName
:
'请选择'
}}
</li>
</ul>
<div
class=
"address-content"
@
touchmove
.
stop
>
<ul
v-show=
"isShowProvince"
id=
"province"
>
<li
v-for=
"(provinceItem, index) in orgList"
:key=
"index"
:class=
"
{ active: provinceItem.selected }"
@click="orgSelect(provinceItem, index)"
>
<span>
{{
provinceItem
.
hospitalName
}}
</span>
<span
v-show=
"provinceItem.selected"
>
<img
src=
"../../assets/images/sort-select-icon.png"
/>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</
template
>
<
script
>
import
{
mapGetters
}
from
"vuex"
;
import
{
getProvinceList
}
from
"../../service"
;
export
default
{
name
:
"PicaOrg"
,
data
()
{
return
{
areaList
:
{
provinceList
:
[]
},
value
:
{
provinceId
:
""
,
provinceName
:
""
},
isDisabled
:
true
,
isShowProvince
:
true
};
},
props
:
{
baseUrl
:
{
type
:
String
,
default
:
""
},
rank
:
{
type
:
Number
|
String
,
default
:
4
}
},
computed
:
{
...
mapGetters
({
orgList
:
"orgList"
})
},
watch
:
{
orgList
:
{
handler
(
newList
)
{
// console.log('$$$$$$$$$4', newList)
// this.areaList.provinceList = newList;
// this.areaList.provinceList.map(a => {
// a.selected = false;
// // if (a.provinceId == this.value.provinceId) {
// // a.selected = true;
// // }
// });
newList
.
map
(
a
=>
{
a
.
selected
=
false
})
return
newList
},
deep
:
true
}
},
created
()
{
// localStorage.setItem('baseUrl',this.baseUrl);
// this.getProvinceData();
},
methods
:
{
// async getProvinceData() {
// await getProvinceList().then(res => {
// if (res.code === "000000") {
// this.areaList.provinceList = res.data.provinceList;
// this.areaList.provinceList.map(a => {
// if (a.provinceId == this.value.provinceId) {
// a.selected = true;
// }
// });
// }
// });
// },
orgSelect
(
item
,
idx
)
{
// debugger
this
.
value
.
provinceId
=
item
.
hospitalId
;
// this.value.provinceName = item.hospitalName;
// this.areaList.provinceList.map(a => (a.selected = false));
// this.areaList.provinceList[idx].selected = true;
// this.areaList.provinceList[idx].selected = !this.areaList.provinceList[
// idx
// ].selected;
this
.
orgList
[
idx
].
selected
=
true
;
},
confirm
()
{
this
.
$emit
(
"confirm"
,
this
.
value
);
},
cancel
()
{
this
.
$emit
(
"cancel"
,
false
);
}
}
};
</
script
>
<
style
lang=
"less"
scoped
>
.select-wrapper {
font-family: PingFangSC-Regular;
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(55, 56, 57, 0.6);
}
.address-wrap {
position: absolute;
width: 100%;
height: 293px;
background-color: #ffffff;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
.tip-header {
position: relative;
height: 58px;
line-height: 58px;
width: 100%;
font-size: 17px;
display: flex;
justify-content: space-between;
padding: 0 15px;
box-sizing: border-box;
.cancel-btn {
color: #999;
}
h3 {
font-size: 18px;
color: #373839;
font-weight: 400;
}
.submit-btn {
font-size: 17px;
outline: none;
border: 1px solid transparent;
background-color: transparent;
color: #449284 !important;
&:disabled {
color: #c7c8c9;
}
}
}
.address-select {
width: 100%;
height: auto;
/*height: 196px;*/
box-sizing: border-box;
.show-address-header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: relative;
padding-bottom: 4px;
&:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #f0f1f2;
color: #f0f1f2;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.item {
display: inline-block;
font-size: 15px;
line-height: 35px;
height: 35px;
padding: 0 15px;
box-sizing: border-box;
max-width: 25%;
text-align: left;
color: #676869;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
&:last-of-type {
padding-right: 15px;
}
&.active {
color: #373839;
font-family: PingFangSC-Medium;
/*font-weight:500;*/
}
&.active:after {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
right: 0;
width: 10px;
height: 3px;
/*border-radius: 2px;*/
border-radius: 30%;
text-align: center;
background-color: #449284;
transform: translateX(-50%);
}
}
}
.address-content {
position: relative;
width: 100%;
height: 100%;
/*height: 196px;*/
overflow: hidden;
box-sizing: border-box;
ul {
width: 100%;
height: 196px;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 13px;
-webkit-overflow-scrolling: touch;
position: static;
-webkit-transform: translateZ(0px);
li {
height: 35px;
line-height: 35px;
font-size: 15px;
width: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #676869;
cursor: pointer;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
&.active {
color: #449284;
}
img {
width: 10px;
height: 10px;
}
}
}
}
}
}
}
</
style
>
\ No newline at end of file
components/common/pica-org copy 3.vue
已删除
100644 → 0
浏览文件 @
7484f2e4
<!-- 选择地区组件 -->
<
template
>
<div
class=
"select-wrapper"
>
<div
class=
"mask"
@
click=
"cancel"
@
touchmove
.
prevent
>
<div
class=
"address-wrap"
@
click
.
stop
>
<div
class=
"tip-header"
>
<span
class=
"cancel-btn"
@
click=
"cancel"
>
取消
</span>
<h3>
选择机构
</h3>
<span
class=
"submit-btn"
@
click=
"confirm"
>
确定
</span>
<!--
<button
:disabled=
"isDisabled"
class=
"submit-btn"
@
click=
"confirm"
>
确定
</button>
-->
</div>
<div
class=
"address-select"
>
<ul
class=
"show-address-header"
>
<!--
<li
:class=
"
{ active: isShowProvince }" class="item" @click="tabAddressClick(1)"> -->
<li
:class=
"
{ active: isShowProvince }" class="item">
{{
value
.
provinceName
?
value
.
provinceName
:
'请选择'
}}
</li>
</ul>
<div
class=
"address-content"
@
touchmove
.
stop
>
<ul
v-show=
"isShowProvince"
id=
"province"
>
<li
v-for=
"(provinceItem, index) in orgList"
:key=
"index"
:class=
"
{ active: provinceItem.selected }"
@click="orgSelect(provinceItem, index)"
>
<span>
{{
provinceItem
.
hospitalName
}}
</span>
<span
v-show=
"provinceItem.selected"
>
<img
src=
"../../assets/images/sort-select-icon.png"
/>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</
template
>
<
script
>
import
{
mapGetters
}
from
"vuex"
;
import
{
getProvinceList
}
from
"../../service"
;
export
default
{
name
:
"PicaOrg"
,
data
()
{
return
{
areaList
:
{
provinceList
:
[]
},
value
:
{
provinceId
:
""
,
provinceName
:
""
},
isDisabled
:
true
,
isShowProvince
:
true
};
},
props
:
{
baseUrl
:
{
type
:
String
,
default
:
""
},
rank
:
{
type
:
Number
|
String
,
default
:
4
}
},
computed
:
{
...
mapGetters
({
orgList
:
"orgList"
})
},
watch
:
{
orgList
:
{
handler
(
newList
)
{
// console.log('$$$$$$$$$4', newList)
// this.areaList.provinceList = newList;
// this.areaList.provinceList.map(a => {
// a.selected = false;
// // if (a.provinceId == this.value.provinceId) {
// // a.selected = true;
// // }
// });
newList
.
map
(
a
=>
{
a
.
selected
=
false
})
return
newList
},
deep
:
true
}
},
created
()
{
// localStorage.setItem('baseUrl',this.baseUrl);
// this.getProvinceData();
},
methods
:
{
// async getProvinceData() {
// await getProvinceList().then(res => {
// if (res.code === "000000") {
// this.areaList.provinceList = res.data.provinceList;
// this.areaList.provinceList.map(a => {
// if (a.provinceId == this.value.provinceId) {
// a.selected = true;
// }
// });
// }
// });
// },
orgSelect
(
item
,
idx
)
{
// debugger
this
.
value
.
provinceId
=
item
.
hospitalId
;
// this.value.provinceName = item.hospitalName;
// this.areaList.provinceList.map(a => (a.selected = false));
// this.areaList.provinceList[idx].selected = true;
// this.areaList.provinceList[idx].selected = !this.areaList.provinceList[
// idx
// ].selected;
this
.
orgList
[
idx
].
selected
=
true
;
},
confirm
()
{
this
.
$emit
(
"confirm"
,
this
.
value
);
},
cancel
()
{
this
.
$emit
(
"cancel"
,
false
);
}
}
};
</
script
>
<
style
lang=
"less"
scoped
>
.select-wrapper {
font-family: PingFangSC-Regular;
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(55, 56, 57, 0.6);
}
.address-wrap {
position: absolute;
width: 100%;
height: 293px;
background-color: #ffffff;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
.tip-header {
position: relative;
height: 58px;
line-height: 58px;
width: 100%;
font-size: 17px;
display: flex;
justify-content: space-between;
padding: 0 15px;
box-sizing: border-box;
.cancel-btn {
color: #999;
}
h3 {
font-size: 18px;
color: #373839;
font-weight: 400;
}
.submit-btn {
font-size: 17px;
outline: none;
border: 1px solid transparent;
background-color: transparent;
color: #449284 !important;
&:disabled {
color: #c7c8c9;
}
}
}
.address-select {
width: 100%;
height: auto;
/*height: 196px;*/
box-sizing: border-box;
.show-address-header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: relative;
padding-bottom: 4px;
&:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #f0f1f2;
color: #f0f1f2;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.item {
display: inline-block;
font-size: 15px;
line-height: 35px;
height: 35px;
padding: 0 15px;
box-sizing: border-box;
max-width: 25%;
text-align: left;
color: #676869;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
&:last-of-type {
padding-right: 15px;
}
&.active {
color: #373839;
font-family: PingFangSC-Medium;
/*font-weight:500;*/
}
&.active:after {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
right: 0;
width: 10px;
height: 3px;
/*border-radius: 2px;*/
border-radius: 30%;
text-align: center;
background-color: #449284;
transform: translateX(-50%);
}
}
}
.address-content {
position: relative;
width: 100%;
height: 100%;
/*height: 196px;*/
overflow: hidden;
box-sizing: border-box;
ul {
width: 100%;
height: 196px;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 13px;
-webkit-overflow-scrolling: touch;
position: static;
-webkit-transform: translateZ(0px);
li {
height: 35px;
line-height: 35px;
font-size: 15px;
width: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #676869;
cursor: pointer;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
&.active {
color: #449284;
}
img {
width: 10px;
height: 10px;
}
}
}
}
}
}
}
</
style
>
\ No newline at end of file
components/common/pica-org copy 4.vue
已删除
100644 → 0
浏览文件 @
7484f2e4
<!-- 选择地区组件 -->
<
template
>
<div
class=
"select-wrapper"
>
<div
class=
"mask"
@
click=
"cancel"
@
touchmove
.
prevent
>
<div
class=
"address-wrap"
@
click
.
stop
>
<div
class=
"tip-header"
>
<span
class=
"cancel-btn"
@
click=
"cancel"
>
取消
</span>
<h3>
选择机构
</h3>
<span
class=
"submit-btn"
@
click=
"confirm"
>
确定
</span>
<!--
<button
:disabled=
"isDisabled"
class=
"submit-btn"
@
click=
"confirm"
>
确定
</button>
-->
</div>
<div
class=
"address-select"
>
<ul
class=
"show-address-header"
>
<!--
<li
:class=
"
{ active: isShowProvince }" class="item" @click="tabAddressClick(1)"> -->
<li
:class=
"
{ active: isShowProvince }" class="item">
{{
value
.
provinceName
?
value
.
provinceName
:
'请选择'
}}
</li>
</ul>
<div
class=
"address-content"
@
touchmove
.
stop
>
<ul
v-show=
"isShowProvince"
id=
"province"
>
<li
v-for=
"(orgItem, index) in areaList.provinceList"
:key=
"index"
:class=
"
{ active: orgItem.selected }"
@click="orgSelect(orgItem, index)"
>
<span>
{{
orgItem
.
hospitalName
}}
</span>
<span
v-show=
"orgItem.selected"
>
<img
src=
"../../assets/images/sort-select-icon.png"
/>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</
template
>
<
script
>
import
{
mapGetters
}
from
"vuex"
;
import
{
getProvinceList
}
from
"../../service"
;
export
default
{
name
:
"PicaOrg"
,
data
()
{
return
{
areaList
:
{
provinceList
:
[]
},
value
:
{
provinceId
:
""
,
provinceName
:
""
},
isDisabled
:
true
,
isShowProvince
:
true
};
},
props
:
{
baseUrl
:
{
type
:
String
,
default
:
""
},
rank
:
{
type
:
Number
|
String
,
default
:
4
}
},
computed
:
{
...
mapGetters
({
orgList
:
"orgList"
})
},
watch
:
{
orgList
:
{
handler
(
newList
)
{
console
.
log
(
'$$$$$$$$$4'
,
newList
)
this
.
areaList
.
provinceList
=
newList
;
this
.
areaList
.
provinceList
.
map
(
a
=>
{
a
.
selected
=
false
;
});
},
deep
:
true
}
},
created
()
{
},
methods
:
{
orgSelect
(
item
,
idx
)
{
this
.
value
.
provinceId
=
item
.
hospitalId
;
this
.
value
.
provinceName
=
item
.
hospitalName
;
this
.
areaList
.
provinceList
[
idx
].
selected
=
!
this
.
areaList
.
provinceList
[
idx
].
selected
;
this
.
$forceUpdate
()
},
confirm
()
{
this
.
$emit
(
"confirm"
,
this
.
value
);
},
cancel
()
{
this
.
$emit
(
"cancel"
,
false
);
}
}
};
</
script
>
<
style
lang=
"less"
scoped
>
.select-wrapper {
font-family: PingFangSC-Regular;
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(55, 56, 57, 0.6);
}
.address-wrap {
position: absolute;
width: 100%;
height: 293px;
background-color: #ffffff;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
.tip-header {
position: relative;
height: 58px;
line-height: 58px;
width: 100%;
font-size: 17px;
display: flex;
justify-content: space-between;
padding: 0 15px;
box-sizing: border-box;
.cancel-btn {
color: #999;
}
h3 {
font-size: 18px;
color: #373839;
font-weight: 400;
}
.submit-btn {
font-size: 17px;
outline: none;
border: 1px solid transparent;
background-color: transparent;
color: #449284 !important;
&:disabled {
color: #c7c8c9;
}
}
}
.address-select {
width: 100%;
height: auto;
/*height: 196px;*/
box-sizing: border-box;
.show-address-header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: relative;
padding-bottom: 4px;
&:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #f0f1f2;
color: #f0f1f2;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.item {
display: inline-block;
font-size: 15px;
line-height: 35px;
height: 35px;
padding: 0 15px;
box-sizing: border-box;
max-width: 25%;
text-align: left;
color: #676869;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
&:last-of-type {
padding-right: 15px;
}
&.active {
color: #373839;
font-family: PingFangSC-Medium;
/*font-weight:500;*/
}
&.active:after {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
right: 0;
width: 10px;
height: 3px;
/*border-radius: 2px;*/
border-radius: 30%;
text-align: center;
background-color: #449284;
transform: translateX(-50%);
}
}
}
.address-content {
position: relative;
width: 100%;
height: 100%;
/*height: 196px;*/
overflow: hidden;
box-sizing: border-box;
ul {
width: 100%;
height: 196px;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 13px;
-webkit-overflow-scrolling: touch;
position: static;
-webkit-transform: translateZ(0px);
li {
height: 35px;
line-height: 35px;
font-size: 15px;
width: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #676869;
cursor: pointer;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
&.active {
color: #449284;
}
img {
width: 10px;
height: 10px;
}
}
}
}
}
}
}
</
style
>
\ No newline at end of file
components/common/pica-org copy.vue
已删除
100644 → 0
浏览文件 @
7484f2e4
<!-- 选择地区组件 -->
<
template
>
<div
class=
"select-wrapper"
>
<div
class=
"mask"
@
click=
"cancel"
@
touchmove
.
prevent
>
<div
class=
"address-wrap"
@
click
.
stop
>
<div
class=
"tip-header"
>
<span
class=
"cancel-btn"
@
click=
"cancel"
>
取消
</span>
<h3>
选择机构
</h3>
<span
class=
"submit-btn"
@
click=
"confirm"
>
确定
</span>
<!--
<button
:disabled=
"isDisabled"
class=
"submit-btn"
@
click=
"confirm"
>
确定
</button>
-->
</div>
<div
class=
"address-select"
>
<ul
class=
"show-address-header"
>
<!--
<li
:class=
"
{ active: isShowProvince }" class="item" @click="tabAddressClick(1)"> -->
<li
:class=
"
{ active: isShowProvince }" class="item">
{{
value
.
provinceName
?
value
.
provinceName
:
'请选择'
}}
</li>
</ul>
<div
class=
"address-content"
@
touchmove
.
stop
>
<ul
v-show=
"isShowProvince"
id=
"province"
>
<li
v-for=
"(provinceItem, index) in areaList.provinceList"
:key=
"index"
:class=
"
{ active: provinceItem.selected }"
@click="orgSelect(provinceItem, index)"
>
<span>
{{
provinceItem
.
provinceName
}}
</span>
<span
v-show=
"provinceItem.selected"
>
<img
src=
"../../assets/images/sort-select-icon.png"
/>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</
template
>
<
script
>
import
{
getProvinceList
}
from
"../../service"
;
export
default
{
name
:
"PicaOrg"
,
data
()
{
return
{
areaList
:
{
provinceList
:
[],
},
value
:
{
provinceId
:
""
,
provinceName
:
""
,
},
isDisabled
:
true
,
isShowProvince
:
true
,
};
},
props
:
{
baseUrl
:
{
type
:
String
,
default
:
""
},
rank
:
{
type
:
Number
|
String
,
default
:
4
}
},
created
()
{
// localStorage.setItem('baseUrl',this.baseUrl);
this
.
getProvinceData
();
},
methods
:
{
async
getProvinceData
()
{
await
getProvinceList
().
then
(
res
=>
{
if
(
res
.
code
===
"000000"
)
{
this
.
areaList
.
provinceList
=
res
.
data
.
provinceList
;
this
.
areaList
.
provinceList
.
map
(
a
=>
{
if
(
a
.
provinceId
==
this
.
value
.
provinceId
)
{
a
.
selected
=
true
;
}
});
}
});
},
orgSelect
(
item
,
idx
)
{
this
.
value
.
provinceId
=
item
.
provinceId
;
this
.
value
.
provinceName
=
item
.
provinceName
;
this
.
areaList
.
provinceList
.
map
(
a
=>
(
a
.
selected
=
false
));
this
.
areaList
.
provinceList
[
idx
].
selected
=
true
;
},
confirm
()
{
this
.
$emit
(
"confirm"
,
this
.
value
);
},
cancel
()
{
this
.
$emit
(
"cancel"
,
false
);
}
}
};
</
script
>
<
style
lang=
"less"
scoped
>
.select-wrapper {
font-family: PingFangSC-Regular;
.mask {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(55, 56, 57, 0.6);
}
.address-wrap {
position: absolute;
width: 100%;
height: 293px;
background-color: #ffffff;
box-sizing: border-box;
bottom: 0;
left: 0;
right: 0;
.tip-header {
position: relative;
height: 58px;
line-height: 58px;
width: 100%;
font-size: 17px;
display: flex;
justify-content: space-between;
padding: 0 15px;
box-sizing: border-box;
.cancel-btn {
color: #999;
}
h3 {
font-size: 18px;
color: #373839;
font-weight: 400;
}
.submit-btn {
font-size: 17px;
outline: none;
border: 1px solid transparent;
background-color: transparent;
color: #449284 !important;
&:disabled {
color: #c7c8c9;
}
}
}
.address-select {
width: 100%;
height: auto;
/*height: 196px;*/
box-sizing: border-box;
.show-address-header {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: relative;
padding-bottom: 4px;
&:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #f0f1f2;
color: #f0f1f2;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.item {
display: inline-block;
font-size: 15px;
line-height: 35px;
height: 35px;
padding: 0 15px;
box-sizing: border-box;
max-width: 25%;
text-align: left;
color: #676869;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
&:last-of-type {
padding-right: 15px;
}
&.active {
color: #373839;
font-family: PingFangSC-Medium;
/*font-weight:500;*/
}
&.active:after {
content: " ";
position: absolute;
left: 50%;
bottom: 0;
right: 0;
width: 10px;
height: 3px;
/*border-radius: 2px;*/
border-radius: 30%;
text-align: center;
background-color: #449284;
transform: translateX(-50%);
}
}
}
.address-content {
position: relative;
width: 100%;
height: 100%;
/*height: 196px;*/
overflow: hidden;
box-sizing: border-box;
ul {
width: 100%;
height: 196px;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 13px;
-webkit-overflow-scrolling: touch;
position: static;
-webkit-transform: translateZ(0px);
li {
height: 35px;
line-height: 35px;
font-size: 15px;
width: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #676869;
cursor: pointer;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;
&.active {
color: #449284;
}
img {
width: 10px;
height: 10px;
}
}
}
}
}
}
}
</
style
>
\ No newline at end of file
写
预览
Markdown
格式
0%
请重试
or
附加一个文件
附加文件
取消
您添加了
0
人
到此讨论。请谨慎行事。
先完成此消息的编辑!
取消
想要评论请
注册
或
登录