给你看的文章

<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-optionv-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-inputplaceholder="输入您需要购买的价格"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>