82 lines
1.9 KiB
Vue
82 lines
1.9 KiB
Vue
|
<!-- 通讯录 -->
|
|||
|
|
<template>
|
|||
|
|
|
|||
|
|
<view style="position: fixed; top: 0;bottom: 0; left: 0; right: 0; background-color: #ffffff; z-index: -1;"></view>
|
|||
|
|
|
|||
|
|
<up-index-list :index-list="indexList">
|
|||
|
|
<template v-for="(item, index) in itemArr">
|
|||
|
|
<!-- #ifdef APP-NVUE -->
|
|||
|
|
<up-index-anchor :text="indexList[index]"></up-index-anchor>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<up-index-item>
|
|||
|
|
<!-- #ifndef APP-NVUE -->
|
|||
|
|
<up-index-anchor :text="indexList[index]" bg-color="#ffffff" height="78rpx" style="border-bottom: none;margin-left: 32rpx;padding: 0rpx;" size="30rpx"></up-index-anchor>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<view class="list-cell" v-for="(cell, index) in item">
|
|||
|
|
<view class="box">
|
|||
|
|
<image src="../../static/images/icon/tu4-1.jpg" />
|
|||
|
|
<view style="margin: auto 0; margin-left: 24rpx;">
|
|||
|
|
<view><text class="boxtexttop">{{cell}}</text></view>
|
|||
|
|
<view><text class="boxtextbottom">[签名]这个人很懒，什么都没留下</text></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</up-index-item>
|
|||
|
|
</template>
|
|||
|
|
</up-index-list>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import {
|
|||
|
|
ref
|
|||
|
|
} from 'vue';
|
|||
|
|
|
|||
|
|
// 创建响应式数据
|
|||
|
|
const indexList = ref(["A", "B", "C", "D"]);
|
|||
|
|
const itemArr = ref([
|
|||
|
|
['列表A1', '列表A2', '列表A3'],
|
|||
|
|
['列表B1', '列表B2', '列表B3'],
|
|||
|
|
['列表C1', '列表C2', '列表C3'],
|
|||
|
|
['列表D1', '列表D2', '列表D3']
|
|||
|
|
]);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.list-cell {
|
|||
|
|
padding: 0rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box {
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 108rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box>image {
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
border-radius: 60rpx;
|
|||
|
|
display: block;
|
|||
|
|
margin: auto 0;
|
|||
|
|
margin-left: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.boxtexttop {
|
|||
|
|
font-weight: 600;
|
|||
|
|
/* width: 81rpx; */
|
|||
|
|
height: 30rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
color: #000000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.boxtextbottom {
|
|||
|
|
font-weight: Regular;
|
|||
|
|
/* width: 291rpx; */
|
|||
|
|
height: 21rpx;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
color: #939393;
|
|||
|
|
}
|
|||
|
|
</style>
|