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 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('other.aluminumProducts') }}</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 class="btns">
        <span @click="goToPage(0)" class="oneBtn">
            {{ $t('other.supplierQuotation') }}
        </span>
        <span @click="goToPage(1)" class="twoBtn">
          {{ $t('other.supplierBilLading') }}
        </span>
      </view>
    </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: {
    goToPage(titleIndex) {
      uni.navigateTo({url:'/pages_order/order/offerOrBillLading?titleIndex='+titleIndex})
    },

  }
}
</script>

<style scoped lang="scss">

* {
  box-sizing: border-box;
}

.page {

  background-color: #2e394d;

  // 供应商
  .supplier {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120rpx - 120rpx);
    background-color: #2e394d;


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

      .imageFrame {

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

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

      height: 60%;



      .oneItem {
        display: flex;
        height: 33%;

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

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

        .right {
          //height: 30%;
          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: 33%;
        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;
        height: 33%;


        .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;
            width: 80%;
            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;
        }
      }
    }

    .btns {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40rpx;

      .oneBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40%;
        height: 70rpx;
        border-radius: 40rpx;
        color: #1F1C39;

        font-size: 28rpx;
        margin: 20rpx 10rpx 0 0;
        background: #f2f2f2;
        //margin-top: 20rpx;
        border-radius: 40rpx;
      }

      .twoBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40%;
        height: 70rpx;
        border-radius: 40rpx;
        color: #1F1C39;
        font-size: 28rpx;
        margin: 20rpx 10rpx 0 0;
        background: #f2f2f2;
        //margin-top: 20rpx;
        border-radius: 40rpx;
      }

    }
  }

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


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

      .imageFrame {

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

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


      .oneItem {
        display: flex;

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

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

        .right {
          height: 180rpx;
          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: 280rpx;
        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>