konggang-city-miniprogram/pages/enterprise/index.vue

<template>
  <view class="content">
    <view class="input-box">
      <image src="/static/policy/u377.png" alt="" />
      <input type="text" placeholder="请输入关键词搜索" />
    </view>
    <view class="companys">
      <view
        class="company"
        v-for="(company, index) in companyList"
        :key="index"
        @tap="toDetail(index)"
      >
        <view class="title">
          <view class="logo">
            <img :src="company.logo" alt="" />
          </view>
          <view class="name">
            {{ company.name }}
          </view>
        </view>
        <view class="info">
          <view class="view">
            <view class="info_t">法定代表人</view>
            <view class="name">
              {{ company.info.person }}
            </view>
          </view>
          <view class="line"></view>
          <view class="view">
            <view class="info_t">注册资本</view>
            {{ company.info.money }}
          </view>
          <view class="line"></view>
          <view class="view">
            <view class="info_t">成立日期</view>
            {{ company.info.time }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      companyList: new Array(5).fill({
        logo: "/static/enterprise/logo.png",
        name: "康拓科技有限责任公司",
        info: {
          person: "马须伦",
          money: "1,776,759.3万（元）",
          time: "1995-03-25",
        },
      }),
    };
  },
  onLoad() {},
  methods: {
    toDetail(index) {
      uni.navigateTo({
        url: "/pages/enterprise/enterprise_detail?id=" + index,
      });
    },
  },
};
</script>

<style lang="scss">
.content {
  font-size: 30rpx;
  .input-box {
    width: 100%;
    height: 100rpx;
    background-color: #02a7f0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    image {
      position: absolute;
      left: 72rpx;
      width: 40rpx;
      height: 40rpx;
    }
    input {
      background-color: #ffffff;
      width: 90%;
      height: 70%;
      border-radius: 50rpx;
      padding: 3rpx;
      font-size: 26rpx;
      padding-left: 80rpx;
      box-sizing: border-box;
    }
  }
  .companys {
    margin-top: 3%;
    padding: 0 4%;
    .company {
      border-radius: 20rpx;
      box-shadow: rgba(0, 0, 0, 0.35) 0rpx 5rpx 15rpx;
      padding: 2%;
      margin: 2% 0;
      .title {
        display: flex;
        align-items: center;
        .logo {
          image {
            width: 100rpx;
            height: 70rpx;
            margin-right: 30rpx;
          }
        }
      }
      .line {
        width: 3rpx;
        height: 70rpx;
        background: rgb(175, 186, 197);
      }
      .info {
        font-size: 19rpx;
        font-weight: 100;
        display: flex;
        text-align: center;
        justify-content: space-between;
        align-items: center;
        padding: 0 2%;
        margin-top: 2%;
        .view {
          margin-top: 2%;
          .name {
            color: #02a7f0;
          }
          .info_t {
            margin-bottom: 10rpx;
            font-size: 25rpx;
          }
        }
      }
    }
  }
}
</style>