productivity-platform-web/src/views/home/index.vue

<template>
  <div class="base">
      <div class="content">
          <div class="words">
              <h1>渐进、交互式文档生成</h1>
              <p>
                 覆盖房地产、土地和各类资产评估报告自动生成。<br>
                 支持测算表生成和下载，亦可以应用于文档。<br>
                 用户仅需提交必要评估物数据和测算数据，由平台自动生成商业级评估报告。
              </p>
          </div>
          <div class="option">
              <div class="create-btn">
                <button class="cssbuttons-io-button" @click="goto('house/parent')">
                  房地产
                  <div class="icon">
                    <svg
                      height="24"
                      width="24"
                      viewBox="0 0 24 24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path d="M0 0h24v24H0z" fill="none"></path>
                      <path
                        d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"
                        fill="currentColor"
                      ></path>
                    </svg>
                  </div>
                </button>
                <button class="cssbuttons-io-button" @click="goto('assets')">
                  资产
                  <div class="icon">
                    <svg
                      height="24"
                      width="24"
                      viewBox="0 0 24 24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path d="M0 0h24v24H0z" fill="none"></path>
                      <path
                        d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"
                        fill="currentColor"
                      ></path>
                    </svg>
                  </div>
                </button>
                <button class="cssbuttons-io-button" @click="goto('planning')">
                  土地
                  <div class="icon">
                    <svg
                      height="24"
                      width="24"
                      viewBox="0 0 24 24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path d="M0 0h24v24H0z" fill="none"></path>
                      <path
                        d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"
                        fill="currentColor"
                      ></path>
                    </svg>
                  </div>
                </button>
              </div>
              <div class="example-list">
              <el-card class="report-item no-border" shadow="never">
                <div class="report-icon">
                  <img src="../../assets/icons/folder.png" style="width: 52px; height: 52px;"/>
                </div>
                <div class="report-text">
                  <div>
                    <span class="report-text-type">房地产抵押类报告</span>
                    <span> 一 </span>
                    <span class="report-text-name">成都市双流区怡心街道万顺路二段370号“西派国樾”共计22套商业用房地产市场价值咨询评估</span>
                  </div>
                  <div style="padding-top: 5px;">
                    <span>
                      <el-icon>
                        <Avatar />
                      </el-icon>
                      成都中铁华府置业有限公司</span>
                    <span>
                      <el-tag style="margin-left: 5px;">
                        房地产
                      </el-tag>
                      <el-tag style="margin-left: 5px;" type="success">
                        抵押
                      </el-tag>
                    </span>
                    <span style="float: right; color:darkgrey">
                      2024-10-16 12:10:09
                    </span>
                  </div>
                </div>
                <div class="report-button">
                  <el-icon>
                    <Download />
                  </el-icon>
                </div>
              </el-card>
              <el-card class="report-item no-border" shadow="never">
                <div class="report-icon">
                  <img src="../../assets/icons/word.png" style="width: 52px; height: 52px;"/>
                </div>
                <div class="report-text">
                  <span class="report-text-type">房地产咨询类报告</span>
                  <span> 一 </span>
                  <span
                    class="report-text-name">自贡鑫景城实业有限公司开发建设的位于自贡市自流井区汇东路西段与汇兴路交叉口南侧中心城区D2-44-3地块(原汇西片区C1-03地块)4号楼在建工程（建筑物）抵押价值评估
                  </span>
                  <div style="margin-top: 5px;">
                    <span>
                      <el-icon>
                        <Avatar />
                      </el-icon>
                      四川银行股份有限公司自贡分行</span>
                    <span>
                      <el-tag style="margin-left: 5px;">
                        房地产
                      </el-tag>
                      <el-tag style="margin-left: 5px;" type="danger">
                        咨询
                      </el-tag>
                    </span>
                    <span style="float: right; color:darkgrey">
                      2024-10-16 12:10:09
                    </span>
                  </div>
                </div>
                <div class="report-button">
                  <el-icon>
                    <Download />
                  </el-icon>
                </div>
              </el-card>
              <el-card class="report-item no-border" shadow="never">
                <div class="report-icon">
                  <img src="../../assets/icons/excel.png" style="width: 52px; height: 52px;"/>
                </div>
                <div class="report-text">
                  <span class="report-text-type">房地产咨询类报告</span>
                  <span> 一 </span>
                  <span
                    class="report-text-name">自贡鑫景城实业有限公司开发建设的位于自贡市自流井区汇东路西段与汇兴路交叉口南侧中心城区D2-44-3地块(原汇西片区C1-03地块)4号楼在建工程（建筑物）抵押价值评估
                  </span>
                  <div style="margin-top: 5px;">
                    <span>
                      <el-icon>
                        <Avatar />
                      </el-icon>
                      四川银行股份有限公司自贡分行</span>
                    <span>
                      <el-tag style="margin-left: 5px;">
                        房地产
                      </el-tag>
                      <el-tag style="margin-left: 5px;" type="danger">
                        咨询
                      </el-tag>
                    </span>
                    <span style="float: right; color:darkgrey">
                      2024-10-16 12:10:09
                    </span>
                  </div>
                </div>
                <div class="report-button">
                  <el-icon>
                    <Download />
                  </el-icon>
                </div>
              </el-card>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import { loginByOAInfo } from '@/api/user';
import { setToken, getToken } from '@/utils/auth';
import { mapStores } from 'pinia'
import { useUserStore } from '@/stores/useUserStore';

export default {
  data() {
    return {
      mainType: null
    }
  },
  computed: {
    // 非setup语法,需要使用mapStores()才能访问
    // 直接放在生命周期函数也可以访问,但是似乎会导致持久化失效,没找到解决办法,建议还是用mapStores
    // 名字会变成id + 'Store' 的形式,比如id本来是user,那么这种方式使用就需要变成this.userStore.xxx
    ...mapStores(useUserStore),
  },
  created() {
    // 如果路由上带了token,说明是从oa刚跳转过来,需要进行登录
    if (this.$route.query.token) {
      loginByOAInfo(this.$route.query.token).then(res => {
        setToken(res.data.tokenValue);
        this.userStore.setUserInfo(res.data);
      })
    }
    // 登录成功,重新跳转到主页
    this.$router.push(`/home/index`)
  },
  methods: {
    goto(path) {
      this.$router.push(`/home/${path}`)
    }
  }

}
</script>
<style scoped>
.base {
  min-height: calc(100vh - 80px);
  width: 100%;
}

.content {
  /* margin-left: 160px; */
  /* margin-right: 160px; */
  /* padding: 50px 20px 20px 20px; */
}

.words {
  padding: 70px 20px 20px 20px;
  background: linear-gradient(180deg, transparent, hsla(0, 0%, 95%, .29) 47.39%, #fff), linear-gradient(90deg, #f9ddf1 .07%, #e5e1ff 16.73%, #daedff 34.48%, #e2f4e3 49.98%, #ebf5d8 66.12%, #faf2da 81.95%, #fbe5d8 99.9%);
}

h1 {
  margin-left: 160px;
  font-size: 50px;
  font-weight: 400;
}

p {
  margin-left: 160px;
  font-size: 20px;
  letter-spacing: 1px;
  margin-top: 20px;
}

.option {
  width: 58.5%;
  margin-top: 10px;
  margin-left: 160px;
  height: 1000px;
  border-right: 1.5px #dae1eb solid;
  padding: 0px 20px 20px 20px;
}

.create-btn {
  height: 50px;
}

/* From Uiverse.io by adamgiebl */
.cssbuttons-io-button {
  background: #ff6154;
  color: white;
  padding: 0.35em;
  padding-left: 1.2em;
  font-size: 20px;
  font-weight: 400;
  border-radius: 0.3em;
  border: none;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  box-shadow: inset 0 0 1.6em -0.6em #ff6154;
  overflow: hidden;
  position: relative;
  height: 2.7em;
  padding-right: 3.3em;
  cursor: pointer;
  margin-right: 20px;
  float: left;
  width: 8em;
}

.cssbuttons-io-button .icon {
  background: white;
  margin-left: 1em;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.2em;
  width: 2.2em;
  border-radius: 0.3em;
  box-shadow: 0.1em 0.1em 0.6em 0.2em #ff6154;
  right: 0.3em;
  transition: all 0.3s;
}

.cssbuttons-io-button:hover .icon {
  width: calc(100% - 0.6em);
}

.cssbuttons-io-button .icon svg {
  width: 1.1em;
  transition: transform 0.3s;
  color: #ff6154;
}

.cssbuttons-io-button:hover .icon svg {
  transform: translateX(0.1em);
}

.cssbuttons-io-button:active .icon {
  transform: scale(0.95);
}

.no-border {
  border: none;
  border-radius: 0.6em;
}
</style>