mediaAll/src/view/allMedia/authorization.vue

<template>
  <div class="authorization">
    <div class="sohuquan">
      <h1 style="font-weight: 400; color: #777777">点击授权登录</h1>
      <div class="platform">
        <img v-for="item in platformLsit" @click="() => toClick(item)" :key="item.url" :src="item.url" />
      </div>
      <div class="text">
        <span class="textarea">授权登录平台</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import ajax from '../../utils/request';
import { ref } from 'vue';
// import config from '../../config/index';
const platformLsit = ref([
  {
    code: '/oauth/douyin/code',
    url: 'https://import.smcic.net/img/douyin.png',
  },
  {
    code: '/oauth/kuaishou/code',
    url: 'https://import.smcic.net/img/kuaishou.png',
  },
  {
    code: '/oauth/weixin/code',
    url: 'https://import.smcic.net/img/weixin.png',
  },
  {
    code: '/oauth/bilibili/code',
    url: 'https://import.smcic.net/img/bilibili.png',
  },
  {
    code: '/oauth/weibo/code',
    url: 'https://import.smcic.net/img/weibo.png',
  },
  {
    code: '/oauth/toutiao/code',
    url: 'https://import.smcic.net/img/toutiao.png',
  },
]);

const toClick = item => {
    if(!item.code) return;
    ajax({
        api: item.code,
        data: {},
        headers: {
            Authorization: localStorage.getItem("token")
        }
    }).then(r=>{
        if(location.replace) location.replace(r.url);
        else location.href = r.url;
    })
}
</script>

<style scoped></style>

<style>
.authorization {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-image: url(https://import.smcic.net/img/bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.sohuquan {
  position: absolute;
  top: 50%;
  right: 3em;
  transform: translateY(-50%);
  background-color: #fff;
  padding: 1em;
  border-radius: 5px;
  width: 55%;
  max-width: 500px;
  text-align: center;
}
.platform {
  margin: 1.5em 0;
}
.platform img {
  display: inline-block;
  max-width: 55px;
  margin-right: 5px;
}
.text {
  border-top: 1px solid #fdc112;
  color: #fdc112;
  font-size: 20px;
  margin: 3em 0 1em 0;
}
.text .textarea {
  margin-top: -1.5em;
  background: #fff;
  display: inline-block;
  padding: 0 1em;
}
</style>