Skip to content

P
pica-admin-consultation
提交 1aabd77c 编写于 作者: 杨广俊's avatar 杨广俊
浏览文件
操作

选择组件

上级 10acd4dd
隐藏空白字符变更
内嵌 并排
正在显示 包含 288 行增加 和 21 行删除
src/.DS_Store
浏览文件 @ 1aabd77c
无法预览此类型文件
src/componentsn/business/yqy-lecturer-select.1.vue 0 → 100644
浏览文件 @ 1aabd77c
<template>
<section>
<article class="group-title">
<article v-show="showOrder" class="group-title-order">
<div @click="order(1)" class="group-title-order-item">
<span>全国</span><img src="../../images/lecturer/select-down.png"/>
</div>
<div @click="order(2)" class="group-title-order-item">
<span>全部等级</span><img src="../../images/lecturer/select-down.png"/>
</div>
<div @click="order(2)" class="group-title-order-item">
<span>全部科室</span><img src="../../images/lecturer/select-down.png"/>
</div>
</article>
</article>
</section>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
showOrderIndex: 1
}
},
props: {
groupTitle: {
type: String,
default: '课程'
},
isShowNum: {
type: Boolean,
default: true
},
groupNum: {
type: String,
default: "0"
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: true
}
},
computed: {
...mapGetters({
orderNum: 'orderNum'
})
},
watch: {
orderNum(val) {
this.showOrderIndex = 1
}
},
methods: {
toggle() {
this.showTitle = !showTitle
this.showOrder = !showOrder
},
order(index) {
this.showOrderIndex = index
this.$emit('order', index)
},
// resetShowOrderIndex(){
// this.showOrderIndex = 1
// }
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.group-title {
display: flex;
flex-direction: row;
margin: 0 px2rem(25px);
&-order {
display: flex;
flex-direction: row;
width: px2rem(325px);
// padding: px2rem(10px) 0 px2rem(10px);
justify-content: space-between;
font-size: px2rem(13px);
&-item {
// display: inline-block;
// position: relative;
span {
font-size: px2rem(15px);
color: #333;
// margin-right: px2rem(30px);
}
img {
position: relative;
top: px2rem(2px);
left: px2rem(0px);
// top: px2rem(2px);
// left: px2rem(51px);
// padding-top: px2rem(10px);
height: px2rem(15px);
width: px2rem(15px);
}
}
}
.first-name {
// left: px2rem(63px);
}
.course-num {
left: px2rem(37px);
}
.hot-degree {
left: px2rem(25px);
}
.active {
color: #449284;
}
&-title {
padding: 0 px2rem(15px);
&-main {
margin-right: px2rem(6px);
font-size: px2rem(18px);
font-weight: 500;
color: #28344C;
}
&-sub {
font-size: px2rem(15px);
font-weight: 400;
color: #999;
}
}
}
</style>
src/componentsn/business/yqy-lecturer-select.2.vue 0 → 100644
浏览文件 @ 1aabd77c
<template>
<section>
<article class="group-title">
<article v-show="showOrder" class="group-title-order">
<div @click="order(1)" class="group-title-order-item">
<span>全国</span><img src="../../images/sousuo/sort-down.png"/>
</div>
<div @click="order(2)" class="group-title-order-item">
<span>全部等级</span><img src="../../images/sousuo/sort-down.png"/>
</div>
<div @click="order(2)" class="group-title-order-item">
<span>全部科室</span><img src="../../images/sousuo/sort-down.png"/>
</div>
</article>
</article>
</section>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
showOrderIndex: 1
}
},
props: {
groupTitle: {
type: String,
default: '课程'
},
isShowNum: {
type: Boolean,
default: true
},
groupNum: {
type: String,
default: "0"
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: true
}
},
computed: {
...mapGetters({
orderNum: 'orderNum'
})
},
watch: {
orderNum(val) {
this.showOrderIndex = 1
}
},
methods: {
toggle() {
this.showTitle = !showTitle
this.showOrder = !showOrder
},
order(index) {
this.showOrderIndex = index
this.$emit('order', index)
},
// resetShowOrderIndex(){
// this.showOrderIndex = 1
// }
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.group-title {
margin-left: px2rem(15px);
display: flex;
flex-direction: row;
&-order {
display: flex;
flex-direction: row;
padding: px2rem(10px) 0 px2rem(10px);
font-size: px2rem(13px);
&-item {
display: inline-block;
// position: relative;
span {
// margin-right: px2rem(30px);
}
img {
position: relative;
top: px2rem(3px);
left: px2rem(0px);
// top: px2rem(2px);
// left: px2rem(51px);
// padding-top: px2rem(10px);
height: px2rem(15px);
width: px2rem(15px);
}
}
}
.first-name {
// left: px2rem(63px);
}
.course-num {
left: px2rem(37px);
}
.hot-degree {
left: px2rem(25px);
}
.active {
color: #449284;
}
&-title {
padding: 0 px2rem(15px);
&-main {
margin-right: px2rem(6px);
font-size: px2rem(18px);
font-weight: 500;
color: #28344C;
}
&-sub {
font-size: px2rem(15px);
font-weight: 400;
color: #999;
}
}
}
</style>
src/componentsn/business/yqy-lecturer-select.vue
浏览文件 @ 1aabd77c
...@@ -3,20 +3,13 @@ ...@@ -3,20 +3,13 @@
<article class="group-title"> <article class="group-title">
<article v-show="showOrder" class="group-title-order"> <article v-show="showOrder" class="group-title-order">
<div @click="order(1)" class="group-title-order-item"> <div @click="order(1)" class="group-title-order-item">
<span>按名首字母</span> <span>全国</span><img src="../../images/lecturer/select-down.png"/>
<img class="first-name" src="../../images/sousuo/sort-down.png"/>
</div> </div>
<div @click="order(2)" class="group-title-order-item"> <div @click="order(2)" class="group-title-order-item">
<span>最新课程</span> <span>全部等级</span><img src="../../images/lecturer/select-down.png"/>
<img src="../../images/sousuo/sort-down.png"/>
</div> </div>
<div @click="order(3)" class="group-title-order-item"> <div @click="order(2)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 3}">资源数</span> <span>全部科室</span><img src="../../images/lecturer/select-down.png"/>
<img class="course-num" src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 3"/>
</div>
<div @click="order(4)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 4}">热门</span>
<img class="hot-degree" src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 4"/>
</div> </div>
</article> </article>
</article> </article>
...@@ -82,30 +75,38 @@ export default { ...@@ -82,30 +75,38 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../style/mixin.scss'; @import '../../style/mixin.scss';
.group-title { .group-title {
margin-left: px2rem(15px);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: px2rem(4px) px2rem(25px) px2rem(6px);
&-order { &-order {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: px2rem(10px) 0 px2rem(10px); width: px2rem(325px);
// padding: px2rem(10px) 0 px2rem(10px);
justify-content: space-between;
font-size: px2rem(13px); font-size: px2rem(13px);
&-item { &-item {
position: relative; // display: inline-block;
// position: relative;
span { span {
margin-right: px2rem(30px); font-size: px2rem(15px);
color: #333;
// margin-right: px2rem(30px);
} }
img { img {
position: absolute; position: relative;
top: px2rem(2px); top: px2rem(1px);
left: px2rem(51px); left: px2rem(1px);
height: px2rem(15px); // top: px2rem(2px);
width: px2rem(15px); // left: px2rem(51px);
// padding-top: px2rem(10px);
height: px2rem(11px);
width: px2rem(11px);
} }
} }
} }
.first-name { .first-name {
left: px2rem(63px); // left: px2rem(63px);
} }
.course-num { .course-num {
left: px2rem(37px); left: px2rem(37px);
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或