aluminium-trading-uniapp-240925/pages/index/index.vue

<template>
  <view class="page">

    <!--顶部栏-->
    <topbar showRight="1" ></topbar>

    <!-- 语言切换 -->
    <!--<view style="padding: 20rpx;"-->
    <!--      @click="$refs.changeLanguage.open()">-->
    <!--  {{ $t('pages.index.index.language') }}-->
    <!--</view>-->
    <!--<changeLanguage ref="changeLanguage"/>-->

    <!-- 供应商 -->
    <view class="supplier" v-if="userShop">

    </view>

    <!-- 采购商 -->
    <view class="purchaser" v-else>
      <!--上面第一个-->
      <view class="topItem">
        <view class="imageFrame">
          <img src="../../static/image/index/4.png" style="width:100%;height:100%;">
        </view>
      </view>
      <!--  下面三个-->
      <view class="threeHeOne">
        <!-- 第一个-->
        <view class="oneItem">
          <view class="left">
            <span>Company Profile</span>
            <span> {{ $t('pages.index.index.companyProfile') }}</span>
            <span class="subText"> {{ $t('pages.index.index.aluminiumProduct') }}</span>
          </view>
          <view class="right">
            随着全球经济的快速发展，我们这家领先的企业公司应运而生，致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年，总部位于深圳市横岗大厦，拥有广泛的业务领域和专业的团队，专注于实现客户的期望和需求。
          </view>
        </view>

        <!-- 第二个-->
        <view class="twoItem">
          <view class="left">
            <img src="../../static/image/index/2.png" style="width:100%;height:100%;">
          </view>
          <view class="right">
            <img src="../../static/image/index/3.png" style="width:100%;height:100%;">
          </view>
        </view>

        <!-- 第三个-->
        <view class="threeItem">

          <view class="right">
            随着全球经济的快速发展，我们这家领先的企业公司应运而生，致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年，总部位于深圳市横岗大厦，拥有广泛的业务领域和专业的团队，专注于实现客户的期望和需求。
          </view>
          <view class="left">
            <span>Company Profile</span>
            <span> {{ $t('pages.index.index.companyProfile') }}</span>
            <span class="subText"> {{ $t('pages.index.index.aluminiumProduct') }}</span>
          </view>
        </view>
      </view>
    </view>
    <tabber select="0"/>
  </view>
</template>

<script>
import topbar from '@/components/base/topbar.vue'
import tabber from '@/components/base/tabbar.vue'
import productList from '@/components/user/productList.vue'
import {mapGetters} from 'vuex'
import changeLanguage from '@/components/base/changeLanguage.vue'

export default {
  components: {
    tabber,topbar,
    productList,
    changeLanguage
  },
  data() {
    return {

      queryParams: {
        pageNo: 1,
        pageSize: 10,
        title: ''
      },
    }
  },
  computed: {
    ...mapGetters(['userShop']),
  },
  methods: {



  }
}
</script>

<style scoped lang="scss">

* {
  box-sizing: border-box;
}

.page {
  & /deep/ .uv-icon__icon {
    font-size: 30rpx !important;
  }



  // 供应商
  .supplier {

  }

  // 采购商
  .purchaser {
    display: flex;
    flex-direction: column;
    //gap: 40rpx;
    background-color: #2e394d;


    .topItem {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 350rpx;
      background-image: url('../../static/image/index/1.png');
      background-size: cover;

      .imageFrame {

        width: 90%;
        height: 90%;
        //padding:80rpx;
      }
    }

    .threeHeOne {
      display: flex;
      padding: 20rpx 40rpx 40rpx;
      flex-direction: column;


      .oneItem {
        display: flex;
        //width: 100vw;

        .left {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 20rpx;
          width: 33%;
          background-color: #1e293d;
          color: white;
          font-size: 26rpx;

          .subText {
            background-color: #2e394d;
            padding: 0 20rpx;
          }
        }

        .right {
          height: 200rpx;
          width: 66%;
          padding: 20rpx;
          background-image: url('../../static/image/index/1.png');
          background-size: cover;
          font-size: 20rpx;
          color: white;
        }
      }

      .twoItem {
        display: flex;
        justify-content: space-between;
        gap: 20rpx;
        height: 300rpx;
        margin-top: 20rpx;
        padding: 10rpx;

        .left {
          width: 60%;
          padding: 20rpx;
          background-color: #1e293d;
        }

        .right {
          width: 40%;
          padding: 20rpx;
          background-color: #1e293d;
        }
      }

      .threeItem {
        display: flex;
        //width: 100vw;

        .left {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 20rpx;
          width: 33%;
          background-color: #1e293d;
          color: white;
          font-size: 26rpx;

          .subText {
            background-color: #2e394d;
            padding: 0 20rpx;
          }
        }

        .right {
          height: 200rpx;
          width: 66%;
          padding: 20rpx;
          background-image: url('../../static/image/index/1.png');
          background-size: cover;
          font-size: 20rpx;
          color: white;
        }
      }
    }
  }
}

</style>