山东大学项目实训记录(六)——详细信息界面搭建和走马灯图片展示

最新推荐文章于 2024-01-22 19:19:52 发布

qbIHSOM

最新推荐文章于 2024-01-22 19:19:52 发布

阅读量107

点赞数

本文链接：https://blog.csdn.net/nHZIHZIHSIN/article/details/118602181

版权

工作途中被小组成员拖去解决调取服务器信息的问题，消耗了很多时间，但是没有解决，后端同学说是跨栈问题，等待后端解决。
剩下的时间简易的搭建了一下病人详细信息的页面

        <el-card shadow="hover">
          <template #header>
            <div class="clearfix">
              <span>患者详细信息</span>
            </div>
          </template>
          <el-row :gutter="35">
            <el-col :span="6">
              <div class="info">
                <div class="info-image" @click="showDialog">
                  <img :src="avatarImg" />
                  <span class="info-edit">
                                  <i class="el-icon-lx-camerafill"></i>
                </span>
                </div>
              </div>
            </el-col>
            <el-col :span="18">
              <el-row :gutter="5">
                <el-col :span="8">
                <div class="info-name">姓名：{{ form.uname }}</div>
                </el-col>
                <el-col :span="10">
                <div class="info-name">编号：{{ form.id_number }}</div>
                </el-col>
              </el-row>
              <el-row :gutter="5">
                <el-col :span="6">
                  <div class="info-name">性别：{{ form.sex }}</div>
                </el-col>
                <el-col :span="6">
                  <div class="info-name">年龄：{{ form.age }}</div>
                </el-col>
                <el-col :span="6">
                  <div class="info-name">过敏情况：{{ form.allergic }}</div>
                </el-col>
              </el-row>
              <el-row :gutter="5">
                <el-col :span="8">
                  <div class="info-name">住址：{{ form.current_address }}</div>
                </el-col>
                <el-col :span="10">
                  <div class="info-name">手机号：{{ form.phone }}</div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
        <el-card>

在这里插入图片描述
同样是使用本地的数据，还有一些预计使用系统生成数据没有展示，下方划线处预计插入病人案例的简略信息表格，并能够进行点击跳转到详细信息页面，但是在获取到服务器数据之前暂且搁置
然后是用来展示病例详细信息中的图片的走马灯组件

    <el-card shadow="hover">
      <el-carousel :interval="4000" type="card" height="375px">
        <el-carousel-item>
          <el-image :src="url1"></el-image>
        </el-carousel-item>
        <el-carousel-item>
          <el-image :src="url2"></el-image>
        </el-carousel-item>
        <el-carousel-item>
          <el-image :src="url3"></el-image>
        </el-carousel-item>
        <el-carousel-item>
          <el-image :src="url4"></el-image>
        </el-carousel-item>
        <el-carousel-item>
          <el-image :src="url5"></el-image>
        </el-carousel-item>
      </el-carousel>
    </el-card>


    const url1="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
    const url2="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg"
    const url3="https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
    const url4="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
    const url5="https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg"

在这里插入图片描述
使用走马灯和图片组件的组合，但是有一点小问题，组合使用的图片组件点击预览没有反应，将点击绑定到走马灯组件上也是一样，问题有待解决。