yizhizan-h5/my/renzheng/editCompany.vue

<template>
  <view class="ms-detail">
    <nav-bar title="编辑公司信息" color="#000"></nav-bar>
    <view class="ms-content">
      <view class="ms-title">编辑公司及品牌信息</view>
      <view class="ms-item">
        <view class="ms-item-title" @click="checkBaseMsg">
          <view class="ms-title-txt">基本信息5/5</view>
          <view class="ms-title-icon">
            <image
              src="@/static/images/my/my/top-up.svg"
              mode="scaleToFill"
              class="top"
              v-if="baseMsg"
            />
            <image
              src="@/static/images/my/my/right.svg"
              mode="scaleToFill"
              class="right"
              v-else
            />
          </view>
        </view>
        <view class="ms-item-content" v-if="baseMsg">
          <view class="name-content-item">
            <view class="name-item">品牌logo</view>
            <view class="value-item">
              <image src="" mode="scaleToFill" />
              <u-icon name="arrow-right" color="#999" size="20"></u-icon>
            </view>
          </view>
          <view class="name-content-item">
            <view class="name-item">公司名称</view>
            <view class="value-item">
              <text>汉瑞国际</text>
              <u-icon name="arrow-right" color="#999" size="20"></u-icon>
            </view>
          </view>
          <view class="name-content-item">
            <view class="name-item">公司全称</view>
            <view class="value-item">
              <text>深圳市汉睿国际猎头服务公司</text>
              <u-icon name="arrow-right" color="#999" size="20"></u-icon>
            </view>
          </view>
          <view class="name-content-item">
            <view class="name-item">融资阶段</view>
            <view class="value-item">
              <text>未融资</text>
              <u-icon name="arrow-right" color="#999" size="20"></u-icon>
            </view>
          </view>
          <view class="name-content-item">
            <view class="name-item">人员规模</view>
            <view class="value-item">
              <text>0-20人</text>
              <u-icon name="arrow-right" color="#999" size="20"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="ms-item">
        <view class="ms-item-title" @click="checkCompanyFund">
          <view class="ms-title-txt">公司福利 2/2</view>
          <view class="ms-title-icon">
            <image
              src="@/static/images/my/my/top-up.svg"
              mode="scaleToFill"
              class="top"
              v-if="companyFund"
            />
            <image
              src="@/static/images/my/my/right.svg"
              mode="scaleToFill"
              class="right"
              v-else
            />
          </view>
        </view>
        <view class="ms-item-content" v-if="companyFund">
          <view class="name-content-item">
            <view class="name-item">标准工作时间</view>
            <view class="value-item">
              <text>09:00-18:00</text>
              <u-icon name="arrow-right" color="#999" size="20"></u-icon>
            </view>
          </view>
          <view class="name-content-item">
            <view class="name-item">福利待遇</view>
            <view class="value-item"
              ><text>已添加2项</text>
              <u-icon name="arrow-right" color="#999" size="20"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="ms-item">
        <view class="ms-item-title" @click="checkCompanyDetail">
          <view class="ms-title-txt">公司介绍</view>
          <view class="ms-title-icon">
            已添加
            <image
              src="@/static/images/my/my/top-up.svg"
              mode="scaleToFill"
              class="top"
              v-if="companyDetail"
            />
            <image
              src="@/static/images/my/my/right.svg"
              mode="scaleToFill"
              class="right"
              v-else
            />
          </view>
        </view>
        <view class="ms-item-content" v-if="companyDetail">
          <view class="name-content-item">
            <view class="name-item">标准工作时间</view>
            <view class="value-item">
              <text>09:00-18:00</text>
              <u-icon name="arrow-right" color="#999" size="20"></u-icon>
            </view>
          </view>
          <view class="name-content-item">
            <view class="name-item">福利待遇</view>
            <view class="value-item"
              ><text>已添加2项</text>
              <u-icon name="arrow-right" color="#999" size="20"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="ms-item">
        <view class="ms-item-title" @click="checkMainWork">
          <view class="ms-title-txt">主营业务</view>
          <view class="ms-title-icon">
            去添加
            <image
              src="@/static/images/my/my/top-up.svg"
              mode="scaleToFill"
              class="top"
              v-if="mainWork"
            />
            <image
              src="@/static/images/my/my/right.svg"
              mode="scaleToFill"
              class="right"
              v-else
            />
          </view>
        </view>
        <view class="ms-item-content" v-if="mainWork">
          <view class="name-content-item">
            <view class="name-item">标准工作时间</view>
            <view class="value-item">
              <text>09:00-18:00</text>
              <u-icon name="arrow-right" color="#999" size="20"></u-icon>
            </view>
          </view>
          <view class="name-content-item">
            <view class="name-item">福利待遇</view>
            <view class="value-item"
              ><text>已添加2项</text>
              <u-icon name="arrow-right" color="#999" size="20"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="ms-item">
        <view class="ms-item-title" @click="checkCompanyImg">
          <view class="ms-title-txt">公司相册</view>
          <view class="ms-title-icon">
            已添加3张
            <image
              src="@/static/images/my/my/top-up.svg"
              mode="scaleToFill"
              class="top"
              v-if="companyImg"
            />
            <image
              src="@/static/images/my/my/right.svg"
              mode="scaleToFill"
              class="right"
              v-else
            />
          </view>
        </view>
        <view class="ms-item-content" v-if="companyImg">
          <view class="name-content-item">
            <view class="name-item">标准工作时间</view>
            <view class="value-item">
              <text>09:00-18:00</text>
              <u-icon name="arrow-right" color="#999" size="20"></u-icon>
            </view>
          </view>
          <view class="name-content-item">
            <view class="name-item">福利待遇</view>
            <view class="value-item"
              ><text>已添加2项</text>
              <u-icon name="arrow-right" color="#999" size="20"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="ms-item">
        <view class="ms-item-title" @click="checkPeopleDev">
          <view class="ms-title-txt">人才发展</view>
          <view class="ms-title-icon">
            已添加4项
            <image
              src="@/static/images/my/my/top-up.svg"
              mode="scaleToFill"
              class="top"
              v-if="peopleDev"
            />
            <image
              src="@/static/images/my/my/right.svg"
              mode="scaleToFill"
              class="right"
              v-else
            />
          </view>
        </view>
        <view class="ms-item-content" v-if="peopleDev">
          <view class="name-content-item">
            <view class="name-item">标准工作时间</view>
            <view class="value-item">
              <text>09:00-18:00</text>
              <u-icon name="arrow-right" color="#999" size="20"></u-icon>
            </view>
          </view>
          <view class="name-content-item">
            <view class="name-item">福利待遇</view>
            <view class="value-item"
              ><text>已添加2项</text>
              <u-icon name="arrow-right" color="#999" size="20"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import navBar from "@/components/nav-bar/index.vue";

export default {
  data() {
    return {
      baseMsg: false,
      companyFund: false,
      companyDetail: false,
      mainWork: false,
      companyImg: false,
      peopleDev: false,
    };
  },
  components: {
    navBar,
  },
  methods: {
    checkBaseMsg() {
      this.baseMsg = !this.baseMsg;
    },
    checkCompanyFund() {
      this.companyFund = !this.companyFund;
    },
    checkCompanyDetail() {
      this.companyDetail = !this.companyDetail;
    },
    checkMainWork() {
      this.mainWork = !this.mainWork;
    },
    checkCompanyImg() {
      this.companyImg = !this.companyImg;
    },
    checkPeopleDev() {
      this.peopleDev = !this.peopleDev;
    },
  },
};
</script>
<style scoped lang="scss">
.ms-detail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .ms-content {
    flex: 1;
    width: 100%;
    padding: 40rpx;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    .ms-title {
      color: rgba(51, 51, 51, 1);
      font-family: DM Sans;
      font-size: 48rpx;
      font-weight: 700;
      line-height: 60rpx;
    }
    .ms-item {
      .ms-item-title {
        color: rgba(31, 44, 55, 1);
        font-family: DM Sans;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 44rpx;
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20rpx;
        margin-bottom: 16rpx;
        .ms-title-txt {
        }
        .ms-title-icon {
          color: rgba(153, 153, 153, 1);
          font-family: DM Sans;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 32rpx;
          .top {
            width: 28rpx;
            height: 18rpx;
            margin-left: 8rpx;
          }
          .right {
            width: 18rpx;
            height: 28rpx;
            margin-left: 8rpx;
          }
        }
      }
      .ms-item-content {
        box-sizing: border-box;
        border: 1rpx solid rgba(227, 231, 236, 1);
        border-radius: 12rpx;
        background: rgba(255, 255, 255, 1);
        padding: 36rpx;
        .name-content-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 9rpx 0;
          box-sizing: border-box;
          .name-item {
            color: rgba(153, 153, 153, 1);
            font-family: DM Sans;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 32rpx;
          }
          .value-item {
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgba(153, 153, 153, 1);
            font-family: DM Sans;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 32rpx;
            letter-spacing: 0%;
            text {
              margin-right: 8rpx;
            }
            image {
              width: 50rpx;
              height: 50rpx;
              border-radius: 50%;
              margin-right: 8rpx;
              background: linear-gradient(
                90deg,
                rgba(13, 39, 247, 1),
                rgba(19, 193, 234, 1) 100%
              );
            }
          }
        }
      }
    }
  }
}
</style>