<template>
  <div class="wrap" style="padding: 20px">
    <p class="head-title">协会概况</p>
    <div class="header-content">
      <div class="edit-text">
        <textarea name="" id=""></textarea>
      </div>
      <div class="association-intro"> 协会介绍 </div>
    </div>
    <div class="content">
      <div class="left-content">
        <div class="head-title">会员概况</div>
      </div>
      <div class="right-content">
        <div class="head-title">近期公告</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'Survey',
    components: {},
    setup() {
      return {};
    },
  });
</script>
<style scoped>
  .head-title {
    font-size: 20px;
  }

  .header-content {
    display: flex;
  }

  .edit-text {
    max-width: 350px;
  }

  .edit-text textarea {
    width: 100%;
    height: 300px;
    padding: 10px;
    outline: none;
    resize: none;
  }

  .association-intro {
    padding: 10px;
    margin-left: 50px;
    flex: 1;
    border: 1px solid gray;
  }

  .content {
    display: flex;
    margin: 20px 0;
  }

  .left-content {
    width: 250px;
    height: 320px;
    margin-right: 20px;
    text-align: center;
    border: 1px solid gray;
  }

  .right-content {
    flex: 1;
    padding: 15px;
    border: 1px solid gray;
  }
  @media (max-width: 639px) {
    .header-content,
    .content {
      display: block;
      width: 90%;
      margin: 0 auto;
    }

    .association-intro {
      height: 320px;
      padding: 10px;
      margin: 10px auto;
      margin-left: 0;
      border: 1px solid gray;
    }

    .left-content,
    .right-content {
      width: 100%;
      height: 320px;
      margin: 20px 0;
    }
  }
</style>
