<template>
  <div class="page flex-col">
    <SecondHeader :title="'COOPERATION'"
                  :bcUrl="bgHeaderUrl" :desc="'合作优势'" :btn-group="[{
									name:'设备购买模式',
									url:'/cooperation',
									isSelect:false
								},{
									name:'设备租赁模式',
									url:'/lease',
									isSelect:false
								},{
									name:'运营商分级',
									url:'/operator',
									isSelect:true
								},{
									name:'代理商体系',
									url:'/agent',
									isSelect:false
								}]"/>
    <div class="box_4 flex-col">
      <div class="box_5 flex-row justify-between">
        <div class="group_2 flex-col">
          <div class="block_1 flex-row justify-between">
            <span class="text_8">运营商分级</span>
            <img class="image_4"
                 src="@/assets/operator/icon_1.png"/>
          </div>
          <span class="text_9">越早加入，收益越大</span>
          <div class="block_2 flex-col">
            <div class="image-wrapper_2 flex-row">
              <img class="image_5" :src="item.lanhuimage0" v-for="(item, index) in loopData0"
                   :key="index"/>
            </div>
            <div class="list_1 flex-row">
              <div class="text-group_2 flex-col justify-between" v-for="(item, index) in loopData1"
                   :key="index">
                <span class="text_10" v-html="item.lanhutext0"></span>
                <span class="text_11" v-html="item.lanhutext1"></span>
              </div>
            </div>
          </div>
        </div>
        <img class="image_6" src="@/assets/operator/main_image.png"/>
      </div>
    </div>
  </div>
</template>
<script>
import HeroSection from '@/components/HeroSection.vue'
import SecondHeader from '../components/second_header.vue';
import operatorCard1 from '@/assets/operator/card_1.png'
import operatorCard2 from '@/assets/operator/card_2.png'
import operatorCard3 from '@/assets/operator/card_3.png'
import operatorCard4 from '@/assets/operator/card_4.png'
import bgHeaderUrl from '@/assets/operator/bg_header.png'

export default {
  components: {
    HeroSection,
    SecondHeader
  },
  data() {
    return {
      bgHeaderUrl: bgHeaderUrl,
      loopData0: [{
        lanhuimage0: operatorCard1,
      },
        {
          lanhuimage0: operatorCard2,
        },
        {
          lanhuimage0: operatorCard3,
        },
        {
          lanhuimage0: operatorCard4,
        },
      ],
      loopData1: [{
        lanhutext0: '一般运营商',
        lanhutext1: 'General&nbsp;operator'
      },
        {
          lanhutext0: '银牌运营商',
          lanhutext1: 'Silver&nbsp;operator'
        },
        {
          lanhutext0: '金牌运营商',
          lanhutext1: 'Gold&nbsp;Operator'
        },
        {
          lanhutext0: '钻石运营商',
          lanhutext1: 'Diamond&nbsp;operator'
        },
      ],
      constants: {},
    };
  },
  methods: {},
};
</script>
<style src="./common.css"/>
<style scoped>
.page {
  position: relative;
  width: 100vw;
  height: 105vw;
  overflow: hidden;
}

.box_4 {
  width: 100vw;
  height: 59.43vw;
  margin-bottom: 18.18vw;
}

.box_5 {
  width: 85.47vw;
  height: 39.07vw;
  margin: 7.29vw 0 0 13.48vw;
}

.group_2 {
  width: 72.97vw;
  height: 39.07vw;
}

.block_1 {
  width: 72.97vw;
  height: 2.45vw;
}

.text_8 {
  background-image: linear-gradient(90deg,
  rgba(0, 82, 217, 1) 0,
  rgba(0, 82, 217, 1) 0,
  rgba(0, 199, 218, 1) 100%,
  rgba(0, 199, 218, 1) 100%);
  width: 12.45vw;
  height: 2.45vw;
  overflow-wrap: break-word;
  color: rgba(0, 82, 217, 1);
  font-size: 2.5vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 1.57vw;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.image_4 {
  width: 2.09vw;
  height: 0.63vw;
}

.text_9 {
  width: 15.21vw;
  height: 1.83vw;
  overflow-wrap: break-word;
  color: rgba(67, 67, 67, 1);
  font-size: 1.66vw;
  font-family: OPPOSans-R;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 1.57vw;
  margin: 2.39vw 0 0 0.05vw;
}

.block_2 {
  width: 72.92vw;
  height: 28.13vw;
  background: url(@/assets/operator/bg_5.png) -0.16vw -0.16vw no-repeat;
  background-size: 73.22vw 28.43vw;
  margin: 4.27vw 0 0 0.05vw;
}

.image-wrapper_2 {
  width: 65.94vw;
  height: 11.15vw;
  margin: 4.16vw 0 0 4.42vw;
}

.image_5 {
  width: 9.43vw;
  height: 10.21vw;
  margin: 0.72vw 8.33vw 0 0;
}

.list_1 {
  width: 63.13vw;
  height: 3.18vw;
  justify-content: space-between;
  margin: 3.38vw 0 6.25vw 4.89vw;
}

.text-group_2 {
  width: 8.39vw;
  height: 3.18vw;
  margin-right: 9.85vw;
}

.text_10 {
  width: 8.44vw;
  height: 1.67vw;
  overflow-wrap: break-word;
  color: rgba(67, 67, 67, 1);
  font-size: 1.66vw;
  font-family: OPPOSans-B;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  line-height: 1.57vw;
}

.text_11 {
  width: 7.87vw;
  height: 0.99vw;
  overflow-wrap: break-word;
  color: rgba(67, 67, 67, 1);
  font-size: 1.25vw;
  font-family: DINEngsbek-Alternate;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 1.25vw;
  margin: 0.52vw 0 0 0.36vw;
}

.image_6 {
  width: 11.46vw;
  height: 19.12vw;
}
</style>