elink-star
/
epmet-oper-pc-chengyang
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

组件自定义

preview
jiangyy 4 years ago
parent
7629d231bf
commit
82c8319958
4 changed files with 193 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 184
      epmet-oper-web/src/assets/scss/modules/wx-mini/extended.scss
  2. 7
      epmet-oper-web/src/components/wx-index/cpt-item.vue
  3. 76
      epmet-oper-web/src/components/wx-index/extended.vue
  4. 3
      epmet-oper-web/src/views/modules/customer/customize/MiniHome.vue

184
epmet-oper-web/src/assets/scss/modules/wx-mini/extended.scss
View File

@ -37,72 +37,150 @@
}
// 更多功能2
.mw-cpt-cnt_function2 {
position: relative;
margin-top: 10px;
.extended_more2 {
border-radius: 10px;
// overflow-x: scroll;
overflow: hidden;
margin: 10px 13px;
padding:0 0 13px 0;
background-color: white;
.d-cpt-wrap {
border-radius: 10px;
// overflow-x: scroll;
overflow: hidden;
margin: 0 13px;
padding:0 0 13px 0;
background-color: white;
.link {
width: 100%;
position: relative;
.link {
width: 100%;
.link-item{
display: inline;
position: relative;
.link-item{
display: inline;
position: relative;
> img {
width:45%;
// width: 308px;
margin: 8px;
// height: 160px;
border-radius: 10px;
}
span {
position: absolute;
top: -10px;
left: 20px;
color: #fff;
font-size: 15px;
font-family: PingFang SC;
font-weight: bold;
color: #ffffff;
}
> img {
width:45%;
// width: 308px;
margin: 8px;
// height: 160px;
border-radius: 10px;
}
span {
position: absolute;
top: -10px;
left: 20px;
color: #fff;
font-size: 15px;
font-family: PingFang SC;
font-weight: bold;
color: #ffffff;
}
}
}
.dots {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
width: 100%;
display: flex;
justify-content: center;
.dot {
margin: 0 5px;
width: 20px;
height: 4px;
border-radius: 6px;
background-color: #ddd;
transition: all ease $ad1;
&.z-on {
background-color: $c1;
}
}
}
}
//问卷调查
.extended_question{
margin:10px 10px;
background: #FFFFFF;
box-shadow: 0px 4px 29px 0px rgba(63, 63, 63, 0.1);
border-radius: 10px;
height: 60px;
padding:10px;
line-height: 40px;
.left_title{
width: 40px;
float: left;
font-size: 17px;
font-family: PangMenZhengDao;
font-weight: 400;
font-style: italic;
color: #E2281B;
line-height: 20px;
background: linear-gradient(0deg, #F6A43B 0%, #F56923 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.center_content{
width: 70%;
float: left;
margin-left:10px;
font-size: 17px;
font-family: PingFang SC;
font-weight: 500;
color: #3F3F3F;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.right_more{
width: 34px;
float: right;
line-height: 20px;
font-size: 13px;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
}
}
//快捷入口
.extended_quick {
margin-top: 10px;
background: rgba(255, 255, 255, 1);
.more_list {
padding:20px 10px;
display: flex;
justify-content: flex-start;
flex-wrap:wrap;
.dots {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
width: 100%;
.more_item {
width:25%;
display: flex;
justify-content: center;
.dot {
margin: 0 5px;
width: 20px;
height: 4px;
border-radius: 6px;
background-color: #ddd;
transition: all ease $ad1;
&.z-on {
background-color: $c1;
}
flex-direction: column;
text-align: center;
img {
width: 40px;
height: 40px;
margin-bottom: 1px;
}
p {
font-size: 13px;
text-align: center;
font-family: PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 1);
}
}
}
}

7
epmet-oper-web/src/components/wx-index/cpt-item.vue
View File

@ -50,9 +50,11 @@
:isFocused=isFocused></score>
</div>
<!-- 扩展功能：更多功能1、更多功能2 -->
<!-- 扩展功能：更多功能1、更多功能2、快捷入口、问卷调查 -->
<div v-else-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons'
||item.componentFrontId==='resi-functionList-extend-moreFunctionIcons2'">
||item.componentFrontId==='resi-functionList-extend-moreFunctionIcons2'
||item.componentFrontId==='resi-functionList-extend-quickentry'
||item.componentFrontId==='resi-functionList-extend-question'">
<extended :item=item
:isFocused=isFocused></extended>
</div>
@ -137,6 +139,7 @@ export default {
this.$refs[tempOnlyId].scrollIntoViewIfNeeded(false)
},
focusCpt () {
console.log(this.item)
this.$emit('focus', this.item)
}
}

76
epmet-oper-web/src/components/wx-index/extended.vue
View File

@ -4,7 +4,7 @@
:class="{'z-focused': isFocused}"
@click="focusCpt">
<!-- 更多功能组件 -->
<!-- 扩展功能—更多功能1 -->
<div class="extended_more1"
v-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons'">
@ -29,31 +29,30 @@
</div>
<!-- 更多功能2栏组件 -->
<div class="mw-cpt-cnt_function2"
<!-- 扩展功能—更多功能2 -->
<div class="extended_more2"
v-else-if="item.componentFrontId==='resi-functionList-extend-moreFunctionIcons2'">
<div class="d-cpt-wrap">
<div class="link">
<div class="link-item">
<img src="@/assets/img/modules/wx-mini/index-set/wailian-bg.jpg"
mode="aspectFill" />
<span>{{'建议直通车'}}</span>
</div>
<div class="link-item">
<img src="@/assets/img/modules/wx-mini/index-set/wailian-bg.jpg"
mode="aspectFill" />
<span>{{'建议直通车'}}</span>
</div>
<div class="link">
<div class="link-item">
<img src="@/assets/img/modules/wx-mini/index-set/wailian-bg.jpg"
mode="aspectFill" />
<span>{{'建议直通车'}}</span>
</div>
<div class="dots">
<div class="dot z-on"></div>
<div class="dot"></div>
<div class="link-item">
<img src="@/assets/img/modules/wx-mini/index-set/wailian-bg.jpg"
mode="aspectFill" />
<span>{{'建议直通车'}}</span>
</div>
<!-- <div class="dots">
</div>
<div class="dots">
<div class="dot z-on"></div>
<div class="dot"></div>
</div>
<!-- <div class="dots">
<i></i>
<i></i>
<i></i>
@ -61,7 +60,39 @@
</div> -->
</div>
<!-- 扩展功能—快捷入口 -->
<div class="extended_quick"
v-if="item.componentFrontId==='resi-functionList-extend-quickentry'">
<div class="more_list">
<div class="more_item"
:key="subindex"
v-for="(subitem, subindex) in item.demoData.list">
<div>
<img v-if="subitem.icon"
:src="subitem.icon">
<img v-else
src="@/assets/img/modules/wx-mini/index-set/page/icon2.png">
</div>
<p>{{ subitem.name }}</p>
</div>
</div>
</div>
<!-- 扩展功能—问卷调查 -->
<div class="extended_question"
v-if="item.componentFrontId==='resi-functionList-extend-question'">
<div class="left_title">问卷 调查</div>
<!-- <div class="center_content">标题</div> -->
<div class="center_content">{{item.demoData.info.title}}</div>
<div class="right_more">查看更多</div>
</div>
</div>
@ -79,6 +110,9 @@ export default {
props: {
isFocused: Boolean,
item: Object
},
mounted () {
},
methods: {

3
epmet-oper-web/src/views/modules/customer/customize/MiniHome.vue
View File

@ -563,6 +563,7 @@ export default {
}
},
mounted () {
const userType = localStorage.getItem('userType')
if (userType === 'work') {
@ -844,7 +845,7 @@ export default {
},
// 聚焦实例组件
focusCpt (item, index) {
console.log('聚焦实例组件')
console.log('聚焦实例组件', item)
this.globalIndex = index
if (this.isInPreview) return
if (this.focusedCpt.tempOnlyId === item.tempOnlyId) {

Write Preview
Loading…
Cancel
Save