aluminium-trading-uniapp-240925/pages_order/center/systemSet.vue

<template>
  <view class="page">

    <navbar title="系统设置" leftClick @leftClick="$utils.navigateBack"/>

    <view class="frame">
      <view class="content" v-for="(item, index) in list" :key="index">
        <view class="title">{{ item.title }}</view>
        <view class="item" v-for="(item2, index) in item.itemList" :key="index" @click="tapItem(item, index)">
          <view class="key">
            <view class="img">
              <img :src="item2.leftIcon" style="width: 100%; height: 100%;"/>
            </view>
            <view class="text">
              {{ item2.text }}
            </view>
          </view>
          <view class="value">
            {{ item.rightIcon }}
          </view>
        </view>
      </view>
    </view>

  </view>
</template>
<script>
import topbar from "@/components/base/topbar.vue";
import tabber from "@/components/base/tabbar.vue";

export default {
  name: "systemSet",
  components: {tabber, topbar},
  data() {
    return {
      list: [
        {
          title: "账号设置",
          itemList: [
            {leftIcon: "../static/center/1.svg", text: "切换账号", rightIcon: ">"},
            {leftIcon: "../static/center/2.svg", text: "修改密码", rightIcon: ">"},
          ]
        },
        {
          title: "系统设置",
          itemList: [
            {leftIcon: "../static/center/2.svg", text: "清理缓存", rightIcon: ">"},
            {leftIcon: "https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg", text: "版本更新", rightIcon: ">"},
            {leftIcon: "https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg", text: "退出登录", rightIcon: ">"},
          ]
        },
        {
          title: "身份设置",
          itemList: [
            {leftIcon: "../static/center/4.svg", text: "切换身份", rightIcon: ">"},
          ]
        }
      ]
    }
  },
  methods: {},
}
</script>


<style scoped lang="scss">
.page {
  background-color: #FFF;
  height: 100vh;

  .frame {
    padding: 40rpx;

    .content {
      margin-bottom: 40rpx;

      .title {
        font-size: 30rpx;
        color: #b0b0b0;
      }

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 40rpx;

        .key {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #333333;
          font-size: 32rpx;

          .img {
            width: 40rpx;
            height: 40rpx;
          }

          .text {
            margin-left: 20rpx;
          }


        }

        .value {
          color: #999999;
          font-size: 36rpx;
        }
      }
    }

  }
}
</style>