OpenPlatForm/pages/domain/control/myApp.vue

<template>
  <div>
    <div class="bulletin-box">
      <div class="bulletin-left">公告</div>
      <div
        v-swiper:mySwiper="swiperOption"
        class="swiperWrap"
        style="height: 32px"
      >
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(banner, index) in banners"
            :key="index"
          >
            {{ banner.content }}
          </div>
        </div>
      </div>
    </div>

    <div class="app-box">
      <div class="app-head">
        <span class="head-title">我的应用</span>
        <div class="found-app">
          <div class="primary-button">创建应用</div>
        </div>

        <div class="item-input">
          <el-input
            v-model="searchValue"
            size="mini"
            placeholder="输入关键词搜索"
          ></el-input>
          <div class="item-button">
            <div class="primary-button">搜索</div>
          </div>
        </div>
      </div>

      <div class="app-content">
        <div class="content-box">
          <div class="left-font" style="background: #2f89fc">嗨</div>
          <div class="content-font">
            <p class="p1">Google App</p>
            <p class="p2">创建于2020-12-12</p>
            <p class="p3">应用内包含25个API</p>
          </div>
          <div class="right-details">
            <div class="primary-button">查看详情</div>
          </div>
        </div>

        <div class="content-box">
          <div class="left-font" style="background: #f06292">GO</div>
          <div class="content-font">
            <p class="p1">Google App</p>
            <p class="p2">创建于2020-12-12</p>
            <p class="p3">应用内包含25个API</p>
          </div>
          <div class="right-details">
            <div class="primary-button">查看详情</div>
          </div>
        </div>
        <div class="content-box">
          <div class="left-font" style="background: #6fa5b1">智</div>
          <div class="content-font">
            <p class="p1">Google App</p>
            <p class="p2">创建于2020-12-12</p>
            <p class="p3">应用内包含25个API</p>
          </div>
          <div class="right-details">
            <div class="primary-button">查看详情</div>
          </div>
        </div>
        <div class="content-box">
          <div class="left-font" style="background: #ff4646">莺</div>
          <div class="content-font">
            <p class="p1">Google App</p>
            <p class="p2">创建于2020-12-12</p>
            <p class="p3">应用内包含25个API</p>
          </div>
          <div class="right-details">
            <div class="primary-button">查看详情</div>
          </div>
        </div>
      </div>

      <div class="app-bottom">已全部加载完毕</div>
    </div>
  </div>
</template>


<script>
export default {
  meta: { title: "我的应用" },
  data() {
    return {
      searchValue: "",
      banners: [
        {
          content:
            "[12-11] 重磅消息！智莺上线Api市场专区！免费提供多样玩法专题，助力流量变现",
        },
        {
          content:
            "[12-12] 重磅消息！智莺上线Api市场专区！免费提供多样玩法专题，助力流量变现",
        },
        {
          content:
            "[12-13] 重磅消息！智莺上线Api市场专区！免费提供多样玩法专题，助力流量变现",
        },
        {
          content:
            "[12-14] 重磅消息！智莺上线Api市场专区！免费提供多样玩法专题，助力流量变现",
        },
      ],
      swiperOption: {
        direction: "vertical",
        autoplay: true,
        loop: true,
      },
    };
  },

  methods: {
    handleSelect(key, keyPath) {
      this.$router.push({
        path: key,
        params: { data: "query" },
      });
    },
    handleOpen: function () {},
    handleClose: function () {},
  },
};
</script>

<style lang="scss" scoped>
.app-box {
  padding: 20px;
  background: #fff;
  border-radius: 14px;
  height: 100%;
}

.app-head {
  width: 100%;
  height: 34px;
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  .head-title {
    color: #333333;
    padding: 0 20px;
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    border-left: 4px solid #1890ff;
    box-sizing: border-box;
  }
  .found-app {
    width: 76px;
    height: 34px;
    font-size: 14px;
  }
  .item-input {
    width: 350px;
    height: 34px;
    box-sizing: border-box;
    border-radius: 6px;
    display: flex;
    background: #f7f8fa;
    margin-left: auto;
    align-items: center;
    font-size: 14px;
    .item-button {
      width: 70px;
      height: 100%;
    }
  }
}

.app-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .content-box {
    width: 48.8%;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #eeeeee;
    height: 130px;
    margin-bottom: 20px;
    padding: 20px;
    display: flex;
    .left-font {
      width: 90px;
      height: 90px;
      text-align: center;
      line-height: 90px;
      font-size: 32px;
      color: #fff;
      border-radius: 14px;
      margin-right: 20px;
    }
    .content-font {
      .p1 {
        color: #333333;
        font-size: 20px;
        line-height: 26px;
        margin: 0 0 4px;
      }
      .p2 {
        color: #1890ff;
        margin: 0;
        font-size: 14px;
      }
      .p3 {
        margin: 20px 0 0 0;
        color: #999999;
        font-size: 16px;
        line-height: 21px;
      }
    }
    .right-details {
      width: 98px;
      height: 34px;
      margin: auto 0 0 auto;
      font-size: 14px;
    }
  }
}

.app-bottom {
  text-align: center;
  font-size: 16px;
  color: #999999;
}
</style>