feat:通知
Showing
4 changed files
with
29 additions
and
19 deletions
| ... | @@ -6,10 +6,11 @@ | ... | @@ -6,10 +6,11 @@ |
| 6 | <svg-icon icon-class='notice' /> | 6 | <svg-icon icon-class='notice' /> |
| 7 | <div style="margin-right:5px"></div> | 7 | <div style="margin-right:5px"></div> |
| 8 | <div ref="back" class="back"> | 8 | <div ref="back" class="back"> |
| 9 | <span ref="text" @mouseover="mouseOver" @mouseleave="mouseLeave" :style="{ fontSize: '14px', color: '#fff' }" | 9 | <div ref="text" class="text" @mouseover="mouseOver" @mouseleave="mouseLeave"> |
| 10 | class="text">{{ data.text ? data.text : | 10 | <p v-for="(item, index) in noticeList" :key="index"> |
| 11 | '通知内容' | 11 | {{ item.title }} |
| 12 | }}</span> | 12 | </p> |
| 13 | </div> | ||
| 13 | </div> | 14 | </div> |
| 14 | </div> | 15 | </div> |
| 15 | </transition> | 16 | </transition> |
| ... | @@ -17,13 +18,9 @@ | ... | @@ -17,13 +18,9 @@ |
| 17 | <script> | 18 | <script> |
| 18 | export default { | 19 | export default { |
| 19 | props: { | 20 | props: { |
| 20 | options: { | 21 | noticeList: { |
| 21 | type: Object, | 22 | type: Array, |
| 22 | default () { | 23 | default: [] |
| 23 | return { | ||
| 24 | text: '默认' | ||
| 25 | } | ||
| 26 | } | ||
| 27 | } | 24 | } |
| 28 | }, | 25 | }, |
| 29 | data () { | 26 | data () { |
| ... | @@ -35,7 +32,6 @@ export default { | ... | @@ -35,7 +32,6 @@ export default { |
| 35 | state: 1, | 32 | state: 1, |
| 36 | firstAnimationTime: '', // 状态一动画效果 | 33 | firstAnimationTime: '', // 状态一动画效果 |
| 37 | secondAnimationTime: '', // 状态二动画效果 | 34 | secondAnimationTime: '', // 状态二动画效果 |
| 38 | data: this.options | ||
| 39 | }; | 35 | }; |
| 40 | }, | 36 | }, |
| 41 | methods: { | 37 | methods: { |
| ... | @@ -57,7 +53,7 @@ export default { | ... | @@ -57,7 +53,7 @@ export default { |
| 57 | ); | 53 | ); |
| 58 | setTimeout(res => { | 54 | setTimeout(res => { |
| 59 | this.changeState(); | 55 | this.changeState(); |
| 60 | }, this.data.delay); | 56 | }, 1000); |
| 61 | }, | 57 | }, |
| 62 | // 用速度计算时间(想要保持速度一样,2种状态时间不同需算出) | 58 | // 用速度计算时间(想要保持速度一样,2种状态时间不同需算出) |
| 63 | ComputationTime () { | 59 | ComputationTime () { |
| ... | @@ -126,11 +122,18 @@ export default { | ... | @@ -126,11 +122,18 @@ export default { |
| 126 | width: 100%; | 122 | width: 100%; |
| 127 | cursor: pointer; | 123 | cursor: pointer; |
| 128 | position: relative; | 124 | position: relative; |
| 125 | font-size: 14px; | ||
| 126 | color: #fff; | ||
| 129 | 127 | ||
| 130 | .text { | 128 | .text { |
| 131 | position: absolute; | 129 | position: absolute; |
| 132 | display: inline-block; | 130 | display: inline-block; |
| 133 | padding: 2px 0; | 131 | padding: 2px 0; |
| 132 | display: flex; | ||
| 133 | |||
| 134 | p { | ||
| 135 | margin-right: 10px; | ||
| 136 | } | ||
| 134 | } | 137 | } |
| 135 | } | 138 | } |
| 136 | } | 139 | } | ... | ... |
| ... | @@ -20,7 +20,7 @@ | ... | @@ -20,7 +20,7 @@ |
| 20 | </el-dropdown> | 20 | </el-dropdown> |
| 21 | </div> | 21 | </div> |
| 22 | </div> | 22 | </div> |
| 23 | <NoticeBar class="NoticeBar" :options="options" /> | 23 | <NoticeBar class="NoticeBar" :noticeList="noticeList" /> |
| 24 | </div> | 24 | </div> |
| 25 | </template> | 25 | </template> |
| 26 | <script> | 26 | <script> |
| ... | @@ -36,10 +36,17 @@ export default { | ... | @@ -36,10 +36,17 @@ export default { |
| 36 | data () { | 36 | data () { |
| 37 | return { | 37 | return { |
| 38 | logo: require('../../image/logo.png'), | 38 | logo: require('../../image/logo.png'), |
| 39 | options: { | 39 | noticeList: [ |
| 40 | text: '关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解关于新年假期的调整希望大家可以理解', | 40 | { |
| 41 | delay: '1000', // 动画延迟时间(默认一秒后开始滚动,单位毫秒) | 41 | title: '6666666666666666666' |
| 42 | }, | 42 | }, |
| 43 | { | ||
| 44 | title: '3333333333333333333' | ||
| 45 | }, | ||
| 46 | { | ||
| 47 | title: '6666666666666666666' | ||
| 48 | } | ||
| 49 | ] | ||
| 43 | } | 50 | } |
| 44 | }, | 51 | }, |
| 45 | methods: { | 52 | methods: { | ... | ... |
| ... | @@ -10,7 +10,7 @@ export default { | ... | @@ -10,7 +10,7 @@ export default { |
| 10 | this.isSearch = true | 10 | this.isSearch = true |
| 11 | }, | 11 | }, |
| 12 | getSearch (val) { | 12 | getSearch (val) { |
| 13 | let obj = { ywlymc: '业务来源', sqywmc: '申请业务名称', qlrmc: '权利人', ywrmc: '义务人', slsj: '受理时间' } | 13 | let obj = { ywlymc: '业务来源', qllxmc: '权利类型', djlxmc: '登记类型', ywh: '业务号', sqywmc: '申请业务名称', qlrmc: '权利人', ywrmc: '义务人', slsj: '受理时间' } |
| 14 | this.searchList = Object.entries(val).map((item) => { | 14 | this.searchList = Object.entries(val).map((item) => { |
| 15 | const [name, value] = item | 15 | const [name, value] = item |
| 16 | if (value) return { name: obj[name], value } | 16 | if (value) return { name: obj[name], value } | ... | ... |
| ... | @@ -42,7 +42,7 @@ | ... | @@ -42,7 +42,7 @@ |
| 42 | </el-col> | 42 | </el-col> |
| 43 | </el-row> | 43 | </el-row> |
| 44 | <el-row class="advanced-search"> | 44 | <el-row class="advanced-search"> |
| 45 | <span>高级搜索条件:</span> | 45 | <span>搜索条件:</span> |
| 46 | <ul> | 46 | <ul> |
| 47 | <li v-for="(item, index) in searchList" :key="index"> | 47 | <li v-for="(item, index) in searchList" :key="index"> |
| 48 | {{ item.name }}:{{ item.value }} | 48 | {{ item.name }}:{{ item.value }} | ... | ... |
-
Please register or sign in to post a comment