<template>
<view class="content">
<view class="become-creator-container">
<view class="become-header-title">
成为创作者
</view>
<view class="become-process-list">
<view class="list-content" v-for="(item, index) in processList" :key="index">
<view class="order-number">
{{index + 1}}
</view>
<view class="order-name">
{{item}}
</view>
</view>
</view>
<view class="login-btn">
已有账号登录
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
processList: [
'让您的作品呈现给更多的用户。',
'让我们的云存储产品保护您作品的安全。',
'让您的作品通过流量快速变现。',
'让您省心省力、更放心专注于作品创造。',
'让您在这里遇到更多志同道合的创作者。'
]
}
},
onLoad() {
},
methods: {
}
}
</script>
<style scoped lang="scss">
.content {
width: 100%;
height: 100vh;
overflow: hidden;
}
.become-creator-container {
width: 94%;
margin: 0 auto;
}
.become-header-title {
width: 40vw;
margin: 0 auto;
text-align: center;
margin-top: 4vw;
border-bottom: 3px solid #F0AD4E;
font-size: 17px;
}
.become-process-list {
margin-top: 6vw;
display: flex;
flex-direction: column;
gap: 6vw;
}
.list-content {
display: flex;
align-items: center;
gap: 4vw;
}
.order-number {
width: 6vw;
height: 6vw;
line-height: 6vw;
text-align: center;
border-radius: 50px;
color: #FFFFFF;
background-color: #F0AD4E;
font-size: 12px;
box-sizing: border-box;
}
.login-btn {
width: 100%;
height: 10vw;
line-height: 10vw;
background-color: #F0AD4E;
color: #FFFFFF;
text-align: center;
margin-top: 20vw;
border-radius: 1vw;
}
</style>
