building-materials-shop-uniapp-241014/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(item2, 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">
            {{ item2.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: ">"},
          ]
        },
        {
          title: `系统设置`,
          itemList: [
            {leftIcon: "../static/center/1.svg",  text: `清理缓存`, rightIcon: ">"},
            {leftIcon: "../static/center/2.svg", text: `版本更新`, rightIcon: ">"},
            {leftIcon: "../static/center/2.svg", text: `退出登录`, rightIcon: ">"},
          ]
        },
      ],
    }
  },

  methods: {
    tapItem(item, index) {
      
    }
  },
}
</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>