102 lines
2.5 KiB
Vue
102 lines
2.5 KiB
Vue
<template>
|
|
<view class="a_c_home">
|
|
<view class="c_card">
|
|
<view class="c_content">
|
|
<scroll-view style="height: 100%;" scroll-y>
|
|
<view v-if="info.content" v-html="info.content.content"></view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="btn_box">
|
|
<image class="btn_img" @click="open()" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/card_btn1.webp"></image>
|
|
<image class="btn_img" @click="open()" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/card_btn2.webp"></image>
|
|
</view>
|
|
</view>
|
|
<image class="head_img" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/card_head.webp" info="活动标题"></image>
|
|
<image class="close_img" @click="close" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/close.png" info="关闭按钮"></image>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getArticleList } from "@/api/api.js"
|
|
export default {
|
|
data(){
|
|
return {
|
|
info: ''
|
|
}
|
|
},
|
|
created() {
|
|
this.getArticleList();
|
|
},
|
|
methods:{
|
|
close(){
|
|
this.$emit('close');
|
|
},
|
|
open(){
|
|
uni.navigateTo({
|
|
url: '/pages/newActivity/activityDetail/activityDetail'
|
|
})
|
|
},
|
|
getArticleList(){
|
|
getArticleList(25).then(res=>{
|
|
this.info = res.data.list[0]
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.a_c_home{
|
|
width: 600rpx;
|
|
height: 90vh;
|
|
// border: 1px solid red;
|
|
position: relative;
|
|
.head_img{
|
|
width: 568rpx;
|
|
height: 207rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
}
|
|
.c_card{
|
|
height: calc(100% - 300rpx);
|
|
width: 100%;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
border-radius: 50rpx;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 30rpx;
|
|
padding-top: 70rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.c_content{
|
|
height: calc(100% - 220rpx);
|
|
width: 100%;
|
|
// background-color: #eee;
|
|
}
|
|
.btn_box{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.btn_img{
|
|
width: 461rpx;
|
|
height: 100rpx;
|
|
}
|
|
}
|
|
}
|
|
.close_img{
|
|
position: absolute;
|
|
bottom: 60rpx;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
}
|
|
</style> |