123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- <template>
- <div class="xcx-page-topimg" @click.stop="controlClick">
- <p class="pic">
- <img :src="item.img" v-if="item.img">
- </p>
- <p class="tit" v-if="item.title.s"><moduleText :text="item.title" /></p>
- <div class="note" v-if="item.note.s"><moduleText :text="item.note" /></div>
- <moduleBg class="bg" :base="item.base.dbg" />
- <moduleBg :base="item.base.ubg" />
- </div>
- </template>
- <script>
- import moduleText from './text.vue';
- import moduleBg from './bg.vue';
- export default{
- name:'conTopimg',
- props:{
- 'item':{type:Object},
- 'prev':{default:false}
- },
- components:{moduleText,moduleBg},
- data(){
- return{
- }
- },
- methods:{
- controlClick(){
- if(!this.prev){
- this.$parent.controlClick(this.item.type);
- }
- }
- }
- }
- </script>
- <style>
- .xcx-page-topimg {
- position: relative;
- padding: 0 12px;
- overflow: hidden;
- padding-top: 65px;
- padding-bottom: 12px;
- }
- .xcx-page-topimg .module-background.bg {
- z-index: 1;
- height: 100px;
- width: 110%;
- left: -5%;
- background-color: #29c8a1;
- border-bottom-left-radius: 50%;
- border-bottom-right-radius: 50%;
- }
- .xcx-page-topimg .pic {
- width: 68px;
- position: relative;
- z-index: 2;
- border-radius: 50%;
- overflow: hidden;
- height: 68px;
- border: 2px solid rgba(255, 255, 255, 0.2);
- background: rgba(255, 255, 255, 0.5);
- margin: 0 auto;
- }
- .xcx-page-topimg .pic img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- .xcx-page-topimg .tit {
- font-size: 14px;
- position: relative;
- text-align: center;
- z-index: 2;
- display: block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- padding-top: 5px;
- }
- .xcx-page-topimg .note {
- color: #999;
- position: relative;
- z-index: 2;
- font-size: 12px;
- line-height: 22px;
- padding-top: 5px;
- }
-
- </style>
|