shujuwang/src/views/relation/Relation.vue

<template>
  <div class="relation">
    <!-- 首页导航 -->
    <Navs></Navs>
    <div class="relation_cont">
      <div class="header">
        <div class="left">联系我们</div>
        <div class="right">
          <img :src="imgurl.pos" alt />
          <span>当前位置：</span>
          <span @click="$router.push('/')">首页</span>
          >
          <span @click="$router.push('/relation')">联系我们</span>
        </div>
      </div>
      <div class="center">
        <div class="title">留言板</div>
        <div class="center_input">
          <input type="text" placeholder="姓名*" v-model="leave.name" />
          <input type="text" placeholder="邮箱*" v-model="leave.mail" />
          <input type="text" placeholder="电话*" v-model="leave.iphone" />
        </div>
        <input type="text" placeholder="标题*" v-model="leave.title" />
        <textarea v-model="leave.cont" placeholder="留言内容*"></textarea>
        <div class="sub">提交</div>
      </div>
      <div class="bottom">
        <div class="contactWay">联系方式</div>
        <div class="contactWay_cont">
          <div v-for="(item,index) in relationData" :key="index">
            <div>
              <span>地区</span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.region}}
            </div>
            <div>
              <span>联系人</span>
              &nbsp;&nbsp;&nbsp;&nbsp;{{item.name}}
            </div>
            <div>
              <span>电话</span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.iphone}}
            </div>
            <div>
              <span>地址</span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.site}}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚信息 -->
    <FooterInfors></FooterInfors>
  </div>
</template>
<script>
// 导航
import Nav from '@/components/nav/Nav.vue'
// 页脚信息
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
export default {
  name: 'relation',
  components: {
    Navs: Nav,
    FooterInfors: FooterInfor
  },
  data () {
    return {
      imgurl: {
        pos: require('../../../static/company/posweizhi.png')
      },
      leave: {
        name: '',
        mail: '',
        iphone: '',
        title: '',
        cont: ''
      },
      relationData: [
        {
          region: '华东',
          name: '李先生',
          iphone: '000-12345678',
          site: '北京市西城区月坛南街57号'
        },
        {
          region: '华东',
          name: '李先生',
          iphone: '000-12345678',
          site: '北京市西城区月坛南街57号'
        },
        {
          region: '华东',
          name: '李先生',
          iphone: '000-12345678',
          site: '北京市西城区月坛南街57号'
        }
      ]
    }
  }

}
</script>
<style lang="scss" scoped>
.relation_cont {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  & > .header {
    width: 84.25rem;
    height: 4.25rem;
    // border: 1px solid red;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    & > .left {
      // margin-left: 1.5rem;
      font-size: 1.5rem;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 0.125rem;
      color: #000000;
    }
    & > .right {
      // margin-right: 1.5rem;
      font-size: 1.25rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #8fa3ae;
      & > img {
        width: 1rem;
        height: 1.25rem;
        margin-right: 0.45rem;
      }
      & > span:nth-child(n + 3):hover {
        cursor: pointer;
        color: #52b6e3;
      }
    }
  }
  & > .center {
    width: 84.25rem;
    height: 63.5rem;
    // border: 1px solid red;
    background-color: #ffffff;
    box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    & > .title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 8.75rem;
      font-size: 1.5rem;
      font-weight: normal;
      font-stretch: normal;
      // line-height: 19px;
      letter-spacing: 0rem;
      color: #000000;
    }
    & > .center_input {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      & > input {
        width: 21.25rem;
        height: 3.125rem;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #666666;
        opacity: 0.7;
      }
    }
    & > input {
      width: 77.4rem;
      height: 3.125rem;
      font-size: 1.25rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #666666;
      opacity: 0.7;
    }
    & > textarea {
      width: 77.4rem;
      height: 35rem;
    }
    & > .sub {
      width: 23.5rem;
      height: 3.5rem;
      background-color: #52b6e3;
      border-radius: 0.3125rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-size: 1.375rem;
      font-weight: normal;
      font-stretch: normal;
      // line-height: 19px;
      letter-spacing: 0rem;
      color: #ffffff;
    }
    & > .sub:hover {
      cursor: pointer;
    }
  }
  & > .bottom {
    width: 84.25rem;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    & > .contactWay {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 6.2rem;
      font-size: 1.5rem;
      font-weight: normal;
      font-stretch: normal;
      // line-height: 19px;
      letter-spacing: 0rem;
      color: #000000;
    }
    & > .contactWay_cont {
      margin-bottom:2.375rem;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      & > div {
        width: 22.25rem;
        height: 10.625rem;
        // border: 1px solid red;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        & > div {
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #666666;
          & > span {
            font-size: 1.25rem;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rem;
            color: #333333;
          }
        }
      }
    }
  }
}
</style>