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.
141 lines
3.0 KiB
141 lines
3.0 KiB
<template>
|
|
<view class="help">
|
|
<u-navbar :is-back="false" :title-bold="true">
|
|
<view class="slot-wrap">
|
|
<view class="back" @click="back">
|
|
<u-icon name="arrow-left"></u-icon>
|
|
</view>
|
|
<view class="center">
|
|
<view class="left active" >
|
|
常见问题
|
|
</view>
|
|
<view class="right ">
|
|
使用技巧
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-navbar>
|
|
|
|
<u-collapse>
|
|
<u-collapse-item class="item" :title="item.head" v-for="(item, index) in itemList" :key="index">
|
|
<view class="content">
|
|
{{item.body}}
|
|
</view>
|
|
<view class="btn">
|
|
<view class="like" v-if="false">
|
|
<u-image width="24rpx" height="24rpx" src="../../../static/help_like.png"
|
|
style="transform: translateY(-6rpx);"></u-image><text class="text">已解决</text>
|
|
</view>
|
|
<view class="like active" v-else>
|
|
<u-image width="24rpx" height="24rpx" src="../../../static/check_help_like.png"
|
|
style="transform: translateY(-6rpx);"></u-image><text class="text">已解决</text>
|
|
</view>
|
|
|
|
<view class="unlike">
|
|
<u-image width="24rpx" height="24rpx" src="../../../static/help_unlike.png"
|
|
style="transform: translateY(-6rpx);"></u-image><text class="text">未解决</text>
|
|
</view>
|
|
</view>
|
|
</u-collapse-item>
|
|
</u-collapse>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
itemList: [{
|
|
head: "赏识在于角度的转换",
|
|
body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
|
|
}, {
|
|
head: "生活中不是缺少美，而是缺少发现美的眼睛",
|
|
body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
|
|
}, {
|
|
head: "周围一些不起眼的人、事、物，或许都隐藏着不同凡响的智慧",
|
|
body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
|
|
}],
|
|
}
|
|
},
|
|
methods: {
|
|
back() {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.help {
|
|
padding: 0 36rpx;
|
|
|
|
.item {
|
|
margin: 24rpx 0;
|
|
|
|
.content {
|
|
font-size: 28rpx;
|
|
color: #606060;
|
|
}
|
|
|
|
.btn {
|
|
margin-top: 24rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.like,
|
|
.unlike {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 160rpx;
|
|
height: 66rpx;
|
|
border: 2rpx solid #F5F7FA;
|
|
opacity: 1;
|
|
border-radius: 12rpx;
|
|
|
|
.text {
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
|
|
.like {
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.active {
|
|
color: #E67D29;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
// 导航栏
|
|
.slot-wrap {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
|
|
.back {
|
|
margin-left: 36rpx;
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 154rpx;
|
|
|
|
.left {
|
|
margin-right: 60rpx;
|
|
}
|
|
|
|
.active {
|
|
color: #E67D29;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|