关于把element-UI js和CSS本地化的 问题,如果你是 直接粘贴和复制了index.js 和CSS 文件的你 会发现 ,在html加载的时候 会出现 找不到 对应路径的问题,很简单 这里有 ttf,woff两个文件你没有 在你的HTML根目录下去 创建一个fonts的文件夹,其实只要把这两个搞好就可以了
然后按下图的示例代码来引入就可以了# 注意这里你 CSS的 字体引入会在fonts名称文件
<!DOCTYPE html>!
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
<style type="text/css">
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
}
*{box-sizing: border-box;}
html, body {
min-height: 100%;
}
.left {
float: left;
z-index: 2001;
display: flex!important;
/* display: flex;
flex-direction: column!important; */
}
.left img {
/* flex: 1; */
height: 60px;
width: 250px;
}
.left ul {
/* flex: 1; */
top:155px;
position: fixed;
width: 192px;
background-color: #32478A;
list-style-type:none;
}
.memu-ul {
margin-left: 58px;
}
.memu-ul li {
display: flex;
flex-direction: row !important;
height: 25px;
width: 192px;
margin-bottom: 53px;
}
.memu-ul li img {
width: 20px;
height: 25px;
margin-right: 16px;
}
.memu-ul li a {
line-height: 30px;
text-decoration: none;
color:#D6DAE7;
}
.right {
float: right;
}
.header {
position: fixed;
width: 100%;
height: 69px;
/* background-color: blue; */
/* color: white; */
}
.header img {
width: 100%;
height: 69px;
}
.content .menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 250px;
background-color:#32478A;
}
.content .content {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 250px;
background-color: #F7F8FD;
overflow: auto;
}
#app{
position: fixed;
top: 69px;
left: 250px;
right: 0;
bottom: 0;
}
#app .list-1 {
position: relative;
margin-top: 41px;
/* background-color: aqua; */
}
#app .contorl-p1.u1 {
position: fixed;
top:101px;
right: 30px;
width: 100px;
height: 35px;
display: flex;
flex-direction: row!important;
justify-content: center!important;
align-items:center !important;
border-radius: 13%;
border-width: 1px;
border-style: solid;
border-color: #5B87E7;
color:#fff;
line-height: 12px;
margin-bottom: 14px;
background: url("./icon/t-18.png") no-repeat 0 0;
background-color: #5B87E7;
}
#app .contorl-p1 i {
text-align: center;
padding-left: 16px;
font-style:normal;
}
#app .list-1p {
margin-left: 30px;
}
#app .list-item {
margin-left: 30px;
margin-right: 30px;
border-radius:5px ;
border-width: 2px;
border-style: solid;
border-color: #EEEFF1;
margin-bottom: 8px;
}
#app .item-1 {
margin-top: 20px;
margin-left: 30px;
margin-right: 30px;
border-radius:5px ;
border-width: 2px;
border-style: solid;
border-color: #EEEFF1;
margin-bottom: 8px;
}
#app .el-dialog {
height: 320px;
/* width: 920px ; */
position: relative;
border-radius: 26px;
z-index: 201;
}
#app .el-dialog .cover-1 {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 44px;
/* width: 460px; */
border-top-left-radius: 26px;
border-top-right-radius: 26px;
z-index: 201;
background-color: #32478A;
}
#app .el-dialog .cover-1 i {
margin-top: 13px;
margin-left: 20px;
line-height: 20px;
font-style:normal;
color:#fff;
}
#app .el-dialog__close.el-icon-close {
position: absolute;
top: -10px;
right: 0;
z-index: 300;
font-size: 20px;
color:#fff;
}
#app .flex-1 {
display: flex;
margin-top: 50px;
flex-direction: row;
}
#app .flex-2 {
display: flex;
flex-direction: row;
}
#app .el-dialog .input-1 {
width: 150px;
margin-right: 60px;
margin-bottom: 30px;
}
#app .el-dialog .input-2 {
width: 150px;
margin-bottom: 15px;
}
#app .el-dialog .i-span {
margin-right: 4px;
}
#app .el-dialog .i-span-x {
margin-right: 12px;
}
#app .el-dialog .dialog-footer {
position: relative;
right:60px;
bottom: -80px;
display: flex;
/* margin-top: 49x;
margin-right: 20px; */
flex-direction: row;
}
#app .el-dialog .i-1 {
color:#C93C3C;
}
/* #app .el-dialog .fbt-1 {
} */
</style>
</head>
<body>
<div>
<div class="content">
<div class="menu left">
<img src="./icon/t-1.png" alt="#">
<ul class="memu-ul" >
<li>
<img src="./icon/t-3.png" alt="#"><a href="#">我的任务</a>
</li>
<li>
<img src="./icon/t-4.png" alt="#"><a href="#">项目管理</a>
</li>
<li>
<img src="./icon/t-5.png" alt="#"><a href="#">问题管理</a>
</li>
<li>
<img src="./icon/t-6.png" alt="#"><a href="#">任务评价</a>
</li>
<li>
<img src="./icon/t-7.png" alt="#"><a href="#">档案库</a>
</li>
<li>
<img src="./icon/t-8.png" alt="#"><a href="#">组织管理</a>
</li>
</ul>
</div>
<div class="content right">
<div class="header">
<img src="./icon/t-16.png" alt="#">
</div>
<div id="app">
<div class="list-1" v-for="item in list" :key="item.id">
<div class="list-1p"> 个人信息 <el-button class="u1 contorl-p1" type="button" @click="dialogFormVisible = true"><i>修改</i></el-button></div>
<div class="list-item item-1"> 账号名:   {{item.username}}</div>
<div class="list-item"> 姓名:  {{item.name}}</div>
<div class="list-item"> 性别:  {{item.gender}} </div>
<div class="list-item"> 密码:  {{item.password}} </div>
</div>
<el-dialog title="" calass="cover" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item class="cover-1"><i>个人信息</i></el-form-item>
<div class="flex-1">
<span><i class="i-1">* </i><span>账号名</span><el-input v-model="form.username" class="input-1" autocomplete="off"></el-input></span>
<span><i class="i-1">* </i><span class="i-span">姓名</span><el-input v-model="form.name" class="input-2" autocomplete="off"></el-input></span>
</div>
<div class="flex-2">
<span><i class="i-1">* </i><span class="i-span i-span-x">性别</span><el-select v-model="form.gender" placeholder="请选择性别">
<el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option>
</el-select></span>
<span><i class="i-1">* </i><span class="i-span">密码</span><el-input v-model="form.password" class="input-2" autocomplete="off"></el-input></span>
<div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class ="ftb-1" @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click=" change">保存</el-button>
</div>
</el-dialog>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js" ></script> -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
// var pinfo = {
// template: "#pinfo",
// data: function(){
// }
// }
</script>
<script>
var app = new Vue({
el:"#app",
data (){
return {
edit:"false",
list:[
{
username:"zhang001",
name:"张三",
gender:"男",
password:"123456"
}
],
dialogFormVisible: false,
form: {
username:'',
name: '',
gender:"",
password:""
},
formLabelWidth: '120px'
}
},
methods:{
change() {
this.dialogFormVisible = false
this.list [0]= this.form
}
}
})
</script>
</body>
</html>
w