给你看的文章

<div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div class="text-center">
              <userAvatar :user="user" />
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <svg-icon icon-class="user" />用户名称
                <div class="pull-right">{{ user.userName }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="phone" />手机号码
                <div class="pull-right">{{ user.phonenumber }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="email" />用户邮箱
                <div class="pull-right">{{ user.email }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="tree" />所属部门
                <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="peoples" />所属角色
                <div class="pull-right">{{ roleGroup }}</div>
              </li>
              <li class="list-group-item">
                <svg-icon icon-class="date" />创建日期
                <div class="pull-right">{{ user.createTime }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="user" @getUser="getUser"/>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>


<div>
    <el-form ref="form" :model="user" :rules="rules" label-width="80px">
      <el-form-item label="用户昵称" prop="nickName">
        <el-input v-model="user.nickName" maxlength="30" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phonenumber">
        <el-input v-model="user.phonenumber" maxlength="11" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="user.email" maxlength="50" />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="user.sex">
          <el-radio label="0">男</el-radio>
          <el-radio label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="账户余额">
        <span style="color:rgb(245,108,108) ">￥{{user.money}}元</span>
        <el-button style="color: white;margin-left: 10px;border-radius: 20px;background-color: rgb(245,108,108)" @click="chongzhi">充值</el-button>
        <!--      <el-radio-group v-model="user.sex">-->
        <!--        <el-radio label="0">男</el-radio>-->
        <!--        <el-radio label="1">女</el-radio>-->
        <!--      </el-radio-group>-->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="submit">保存</el-button>
        <el-button type="danger" size="mini" @click="close">关闭</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="充值" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="充值金额" prop="money">
          <el-input v-model="form.money" placeholder="请输入充值金额" />
        </el-form-item>
        <el-form-item label="充值方式" prop="type">
          <el-select v-model="form.type" placeholder="请选择充值方式" style="width: 100%">
            <el-option
              v-for="dict in dict.type.money_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>

<div style="display: flex;justify-content: space-around;">
    <div style="width: 1120px;padding: 10px;">
      <div style="background-color: white;padding: 10px;display:flex;justify-content: space-between;">
        <div style="text-align: initial">
          <h2 style="display: contents;">{{licai.productName}}</h2>
        </div>
      </div>
      <div style="background-color: white;padding: 10px;">
        <div style="display: flex;justify-content: space-around;">
          <div style="width: 55%;">
            <img :src="'http://localhost:8083'+licai.coverPhoto" style="width: 100%;height: 400px;"/>
          </div>
          <div class="blog-message">
            <div>
              <p><i class="el-icon-time blog-icon"></i>风险等级: {{licai.riskLevel}}</p>
            </div>
            <div>
              <p><i class="el-icon-location-outline blog-icon"></i>描述: {{licai.productDescription}}</p>
            </div>
            <div>
              <p><i class="el-icon-c-scale-to-original blog-icon"></i>收益率: {{licai.benefitProfile}}</p>
            </div>
            <div>
              <p><i class="el-icon-user blog-icon"></i>销售数: {{licai.num}}</p>
            </div>
            <div>
              <p><i class="el-icon-phone blog-icon"></i>产品起投价: {{licai.productPrice}}</p>
            </div>
<!--            <div>-->
<!--              <p><i class="el-icon-phone blog-icon"></i>是否打疫苗: {{pet.isvaccine===1?'是':'否'}}</p>-->
<!--            </div>-->
<!--            <div>-->
<!--              <p><i class="el-icon-phone blog-icon"></i>宠物是否有伤人风险: {{pet.hasrisk===1?'是':'否'}}</p>-->
<!--            </div>-->
<!--            <div>-->
<!--              <p><i class="el-icon-phone blog-icon"></i>是否绝育: {{pet.iscut===1?'是':'否'}}</p>-->
<!--            </div>-->
            <div>
              <p><i class="el-icon-phone blog-icon"></i>发布时间: {{licai.createTime}}</p>
            </div>
          </div>
        </div>
        <div style="margin-top: 40px">
          <el-divider content-position="left"><h3>理财产品介绍</h3></el-divider>
          <div style="text-align: start;">
            <p>{{licai.productDescription}}</p>
          </div>
        </div>
        <div>
          <el-button type="success" @click="dialogFormVisibles()" round v-if="hasRole==false">购买</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" :rules="rules1" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="购买的价格" prop="productPrice">
          <el-input
            placeholder="输入您需要购买的价格"
            v-model="ruleForm.productPrice">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('ruleForm')" round>保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>