You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
zhishifufei_uniapp/pages/my/applyLink.vue

83 lines
1.8 KiB

9 months ago
<template>
<BaseContainer class="apply-link flex">
<NavBar title="报名链接" />
<view class="link-list">
<view v-for="(item, index) in linkList" :key="index" class="link-item flex">
<view class="item-top">{{ item.name }}</view>
<view class="item-bottom" @click="openLink(item.link)">{{ item.link }}</view>
</view>
</view>
</BaseContainer>
</template>
<script>
export default {
data() {
return {
linkList: [
{ name: '雅思托福开始报名', link: 'https://www.baidu.com.cn' },
{ name: '雅思托福开始报名', link: 'https://www.baidu.com.cn' },
{ name: '雅思托福开始报名', link: 'https://www.baidu.com.cn' },
],
};
},
methods: {
openLink(link) {
console.log(link);
uni.navigateTo({
url: `/pages/my/webview?src=${encodeURIComponent(link)}`,
});
9 months ago
},
},
};
</script>
<style lang="scss" scoped>
.apply-link {
flex-direction: column;
.link-list {
flex: 1;
width: 690rpx;
margin: 0 auto ;
padding-top: 20rpx;
.link-item {
height: 120rpx;
background: #fff;
padding: 24rpx 30rpx;
margin-bottom: 20rpx;
flex-direction: column;
justify-content: space-between;
.item-top {
font-size: 30rpx;
line-height: 30rpx;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item-bottom {
color: #0F74BB;
font-size: 24rpx;
line-height: 24rpx;
}
}
}
.apply-btn {
width: 110rpx;
height: 110rpx;
background: linear-gradient(0deg, #0F74BB 0%, #3293FF 100%);
box-shadow: 0rpx 8rpx 22rpx 5rpx rgba(77,144,190,0.34);
border-radius: 50%;
justify-content: center;
position: fixed;
right: 56rpx;
bottom: 314rpx;
>view {
font-size: 22rpx;
color: #FFFFFF;
font-weight: bold;
width: 44rpx;
}
}
}
</style>