MarketingList.vue

<template>
  <div>
    <title-bar title="营销认领" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>

    <div class="content">
      <div class="marketing-top">
        <div class="marketing-top-left">营销线索共计120条</div>
        <div class="marketing-top-right">
          <div class="marketing-top-right-left">已认领129条线索</div>
          <div class="marketing-top-right-right">
            <van-form>
              <van-field class="marketing-top-right-right-name" label-width="20px" name="username" placeholder="请搜索企业名称" />
            </van-form>
          </div>
        </div>
      </div>
      <div class="marketing-list">
        <div><img src="../../../assets/svg/title.svg" alt="" /></div>
        <div>六一科技有限公司</div>
        <div><img src="../../../assets/svg/position-2.svg" alt="" /></div>
        <div>0.3km</div>
        <div>成都市武侯区天谷7路...</div>
        <div>认领</div>
      </div>
      <div class="marketing-list">
        <div><img src="../../../assets/svg/title.svg" alt="" /></div>
        <div>六一科技有限公司</div>
        <div><img src="../../../assets/svg/position-2.svg" alt="" /></div>
        <div>0.3km</div>
        <div>成都市武侯区天谷7路...</div>
        <div>认领</div>
      </div>
      <div class="marketing-list">
        <div><img src="../../../assets/svg/title.svg" alt="" /></div>
        <div>六一科技有限公司</div>
        <div><img src="../../../assets/svg/position-2.svg" alt="" /></div>
        <div>0.3km</div>
        <div>成都市武侯区天谷7路...</div>
        <div>认领</div>
      </div>
    </div>

    <div @click="marketingMap" class="marketing-map">
      <div><img src="../../../assets/svg/map-logo.svg" alt="" /><br />地图</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
/**
 * @Description 营销认领列表
 * @Author JiangTao
 * @Date 2021-10-23 下午 06:51
 */
@Component({
  name: "MarketingList",
  components: {
    TitleBar,
  },
})
export default class MarketingList extends Vue {
  pageTitle = ""; // 页面标题

  onClick() {
    console.log(111111);
  }
  mounted() {
    this.pageTitle = this.$route.meta?.name;
  }
  marketingMap() {
    this.$router.push({
      path: "/marketing-mgt/marketing-map",
    });
  }
}
</script>

<style scoped>
.content {
  margin-top: 1.5%;
  padding-left: 4%;
}
.marketing-map {
  position: absolute;
  width: 10%;
  height: 15%;
  right: 100px;
  top: 250px;
  background-image: url("../../../assets/svg/blue-spheric.svg");
  background-repeat: no-repeat;
}
.marketing-map div {
  margin-top: 2%;
  margin-left: 3%;
  color: white;
}
.marketing-top-left {
  font-size: 115%;
  display: inline-block;
  margin-top: 0.8%;
  font-family: "Arial Normal";
}
.marketing-top-right {
  width: 45%;
  float: right;
  margin-right: 5%;
  margin-bottom: -0.2%;
}
.marketing-top-right-left {
  float: left;
  font-size: 115%;
  color: #f59a23;
  margin-right: 5%;
  margin-top: 2%;
  font-family: "Arial Normal";
}
.marketing-top-right-right {
  float: right;
}
.marketing-top-right-right {
  width: 70%;
  float: left;
  /*margin-top: -2%;*/
  background-image: url("../../../assets/svg/search-freak.svg");
  background-repeat: no-repeat;
}
.marketing-top-right-right-name {
  width: 99%;
  height: 32px;
  background-image: url("../../../assets/images/search.png");
  background-size: 6%;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0);
  padding-top: 0.2%;
  padding-bottom: 5%;
  padding-left: 8%;
  margin-top: 1.2%;
  margin-left: 2%;
  color: rgb(153, 153, 153);
}
.marketing-top {
  margin-bottom: 1%;
}
.marketing-list {
  width: 45%;
  height: 64px;
  display: inline-block;
  line-height: 450%;
  margin-left: 0.5%;
  margin-top: 1%;
  margin-right: 4.5%;
  border-bottom: 1px solid rgba(233, 233, 233, 1);
}
.marketing-list > div:first-child {
  margin-left: -2%;
  width: 4.5%;
  height: 40%;
  background-color: #33a3de;
  border-radius: 12px;
  float: left;
  margin-top: 3%;
}
.marketing-list > div:first-child > img {
  width: 65%;
  height: 55%;
  margin-left: 20%;
  margin-top: 20%;
  float: left;
}
.marketing-list > div:nth-child(2) {
  width: 30%;
  height: 10%;
  float: left;
  color: #333333;
  font-size: 115%;
  margin-left: 1%;
}
.marketing-list > div:nth-child(3) {
  width: 1.5%;
  height: 10%;
  float: left;
  margin-top: 4.5%;
  margin-right: 1%;
  background-image: url("../../../assets/svg/position-1.svg");
  background-repeat: no-repeat;
}
.marketing-list > div:nth-child(3) img {
  margin-top: -50%;
  margin-left: -50%;
  float: left;
}
.marketing-list > div:nth-child(4) {
  width: 13%;
  height: 10%;
  float: left;
  color: #999999;
  font-size: 100%;
}
.marketing-list > div:nth-child(5) {
  width: 50%;
  height: 10%;
  float: left;
  color: #999999;
  font-size: 100%;
}
.marketing-list > div:nth-child(6) {
  float: left;
  width: 15%;
  height: 51%;
  line-height: 260%;
  margin-top: -5%;
  margin-left: 85%;
  border: 1px solid rgba(2, 167, 240, 1);
  border-radius: 15px;
  color: rgba(2, 167, 240, 1);
  text-align: center;
  font-size: 97%;
  font-family: "Microsoft Tai Le";
  margin-right: 10%;
}
</style>