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> |