mirror of
https://github.com/cq-panda/Vue.NetCore.git
synced 2026-10-20 08:18:02 +08:00
jxx
476 lines
14 KiB
HTML
476 lines
14 KiB
HTML
<link href="../Content/css/easyui.css" rel="stylesheet" />
|
|
<script src="../Scripts/jquery-1.10.2.js"></script>
|
|
<script src="../Scripts/jquery-easyui/jquery.easyui.min.js"></script>
|
|
<script src="../Scripts/jquery-easyui/easyui-lang-zh_CN.js"></script>
|
|
<link href="../Content/css/bootstrap.css" rel="stylesheet" />
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
}
|
|
|
|
.trans-content {
|
|
padding: 15px;
|
|
height: 730px;
|
|
top: 5%;
|
|
width: 600px;
|
|
position: relative;
|
|
background: #f8f8f8;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.trans-content dt {
|
|
text-align: right;
|
|
}
|
|
|
|
dl dt {
|
|
float: left;
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
padding: 5px;
|
|
width: 100px;
|
|
}
|
|
|
|
.trans-content dl {
|
|
width: 48%;
|
|
float: left;
|
|
}
|
|
|
|
dl dd {
|
|
margin: 2px 0;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.panel-body {
|
|
padding: 0px;
|
|
}
|
|
/*.trans-content .panel-body dl:first-child:after {
|
|
float: right;
|
|
width: 1px;
|
|
display: block;
|
|
content: "";
|
|
margin-top: -120px;
|
|
border: 1px solid #ffa90d;
|
|
border-width: 42px 0px;
|
|
margin-top: -106px;
|
|
}*/
|
|
|
|
.trans-content .panel-body .input-text {
|
|
width: 100%;
|
|
display: inline-block;
|
|
padding-top: 10px;
|
|
border-top: 1px solid #cfcfcf;
|
|
}
|
|
|
|
.trans-content .panel-body .input-text > div {
|
|
width: 33.333%;
|
|
float: left;
|
|
padding: 5px;
|
|
text-align: center;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.trans-content .panel-body {
|
|
padding: 15px;
|
|
}
|
|
/*.trans-content .middle-line {
|
|
border-left: 1px solid #efbf0c;
|
|
float: left;
|
|
height: 82px;
|
|
margin-top: 13px;
|
|
margin-left: -18px;
|
|
}*/
|
|
.trans-content .panel-body .input-text > div input[type=text] {
|
|
height: 25px;
|
|
border: 0px;
|
|
border-bottom: 1px solid #b9dfff;
|
|
outline: none;
|
|
width: 150px;
|
|
}
|
|
|
|
.trans-content .textbox-text {
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.trans-content .datebox {
|
|
border: 0px;
|
|
outline: none;
|
|
}
|
|
|
|
.trans-content .clip {
|
|
max-width: 140px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.trans-content a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.trans-content .remove {
|
|
float: right;
|
|
color: red;
|
|
}
|
|
|
|
.trans-content .foot-add {
|
|
text-align: right;
|
|
}
|
|
</style>
|
|
<style>
|
|
/*body {
|
|
margin: 0px;
|
|
}*/
|
|
|
|
.trans-content {
|
|
padding: 3px;
|
|
position: relative;
|
|
}
|
|
|
|
.trans-content dt {
|
|
text-align: right;
|
|
}
|
|
|
|
dl dt {
|
|
float: left;
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
padding: 5px;
|
|
width: 100px;
|
|
}
|
|
|
|
.trans-content dl {
|
|
width: 48%;
|
|
float: left;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
dl dd {
|
|
margin: 2px 0;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
/*.trans-content .panel-body dl:first-child:after {
|
|
float: right;
|
|
width: 1px;
|
|
display: block;
|
|
content: "";
|
|
margin-top: -120px;
|
|
border: 1px solid #ffa90d;
|
|
border-width: 42px 0px;
|
|
margin-top: -106px;
|
|
}*/
|
|
|
|
.trans-content .panel-body .input-text {
|
|
width: 100%;
|
|
display: inline-block;
|
|
padding-top: 10px;
|
|
border-top: 1px solid #cfcfcf;
|
|
}
|
|
|
|
.trans-content .panel-body .input-text > div {
|
|
width: 33.333%;
|
|
float: left;
|
|
padding: 5px;
|
|
text-align: center;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.trans-content .panel-body {
|
|
padding: 15px;
|
|
}
|
|
/*.trans-content .middle-line {
|
|
border-left: 1px solid #efbf0c;
|
|
float: left;
|
|
height: 82px;
|
|
margin-top: 13px;
|
|
margin-left: -18px;
|
|
}*/
|
|
.trans-content .panel-body .input-text > div input[type=text] {
|
|
height: 25px;
|
|
border: 0px;
|
|
border-bottom: 1px solid #b9dfff;
|
|
outline: none;
|
|
width: 150px;
|
|
}
|
|
|
|
.trans-content .textbox-text {
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.trans-content .datebox {
|
|
border: 0px;
|
|
outline: none;
|
|
}
|
|
|
|
.trans-content .clip {
|
|
max-width: 140px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.trans-content a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.trans-content .remove {
|
|
float: right;
|
|
color: red;
|
|
}
|
|
|
|
.trans-content .foot-add {
|
|
text-align: right;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
#trans-container .content {
|
|
background: #f8f8f8;
|
|
}
|
|
|
|
#trans-container .panel-body {
|
|
border-color: white;
|
|
padding: 0px;
|
|
}
|
|
/*#trans-select-container .content {
|
|
height:2000px !important;
|
|
}*/
|
|
</style>
|
|
<body>
|
|
<div v-for="item in transfer" class="panel panel-warning">
|
|
|
|
<div class="panel-heading">
|
|
|
|
<span class="panel-title" style="font-size: 16px;font-weight: 100;color: #d89008;">买卖方数据</span>
|
|
<span class="panel-title remove glyphicon glyphicon-remove"></span>
|
|
</div>
|
|
<div class="panel-body">
|
|
|
|
<dl>
|
|
|
|
<dd><span>买方价格:</span><span>{{item.detail1.Price}}</span></dd>
|
|
<dd><span>买方价格:</span><span>{{item.detail1.Price}}</span></dd>
|
|
<dd><span>买方价格:</span><span>{{item.detail1.Price}}</span></dd>
|
|
<dd><span>买方价格:</span><span>{{item.detail1.Price}}</span></dd>
|
|
<dd><span>买方价格:</span><span>{{item.detail1.Price}}</span></dd>
|
|
<dd><span>买方价格:</span><span>{{item.detail1.Price}}</span></dd>
|
|
<dt></dt>
|
|
<dt><a>选择买方数据</a></dt>
|
|
</dl>
|
|
<dl>
|
|
|
|
<dt>卖方价格:</dt>
|
|
<dd>{{item.detail2.Price}}</dd>
|
|
<dt>卖方品种：</dt>
|
|
<dd>{{item.detail2.Variety}}</dd>
|
|
<dt>卖方重量/KG: </dt>
|
|
<dd>{{item.detail2.Weight}}</dd>
|
|
<dt>卖方公母：</dt>
|
|
<dd><span>{{item.detail2.Sex}}</span></dd>
|
|
<dt>卖方公司：</dt>
|
|
<dd>{{item.detail2.Company}}</dd>
|
|
<dt>卖方联系人：</dt>
|
|
<dd>{{item.detail2.Contact}}</dd>
|
|
<dt>卖方所在地：</dt>
|
|
<dd class="clip">{{item.detail2.Location}}</dd>
|
|
<dt></dt>
|
|
<dt><a>选择卖方数据</a></dt>
|
|
</dl>
|
|
<div class="input-text">
|
|
|
|
<div>
|
|
|
|
<label>成交价格:</label> <input type="text" placeholder="" v-model="item.Price" />
|
|
</div>
|
|
<div>
|
|
|
|
<label>成交数量:</label> <input type="text" placeholder="" v-model="item.Qty" />
|
|
</div>
|
|
<div>
|
|
|
|
<label>成交时间:</label> <input type="text" style="outline: none;" class="easyui-datetimebox" v-model="item.CreateDate" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--<div id="hook-arguments-example" v-app:foo.a.b="message"></div>-->
|
|
|
|
<div id="vue1"></div>
|
|
<button class="btn btn-info" onclick="add()">测试</button>
|
|
<div class="trans-content">
|
|
<div class="panel panel-warning">
|
|
<div class="panel-heading">
|
|
<span class="panel-title">买卖方数据</span>
|
|
<span class="panel-title remove glyphicon glyphicon-remove"></span>
|
|
</div>
|
|
<div class="panel-body">
|
|
<dl>
|
|
<dt>买方价格: </dt>
|
|
<dd>5000</dd>
|
|
<dt>买方品种：</dt>
|
|
<dd>西门塔尔</dd>
|
|
<dt>买方重量/KG: </dt>
|
|
<dd>1000</dd>
|
|
<dt>买方公母：</dt>
|
|
<dd>统货</dd>
|
|
<dt>买方公司：</dt>
|
|
<dd>北京向中智牧</dd>
|
|
<dt>买方联系人：</dt>
|
|
<dd>18612119023</dd>
|
|
<dt>买方所在地：</dt>
|
|
<dd class="clip">北京市昌平区北京市昌平区北京市昌平区北京市昌平区</dd>
|
|
<dt></dt>
|
|
<dt><a>选择买方数据</a></dt>
|
|
</dl>
|
|
<div class="middle-line"></div>
|
|
<dl>
|
|
<dt>卖方价格: </dt>
|
|
<dd>5000</dd>
|
|
<dt>卖方品种：</dt>
|
|
<dd>西门塔尔</dd>
|
|
<dt>卖方重量/KG: </dt>
|
|
<dd>1000</dd>
|
|
<dt>卖方公母：</dt>
|
|
<dd>统货</dd>
|
|
<dt>卖方公司：</dt>
|
|
<dd>北京向中智牧</dd>
|
|
<dt>卖方联系人：</dt>
|
|
<dd>18612119023</dd>
|
|
<dt>卖方所在地：</dt>
|
|
<dd>北京市昌平区</dd>
|
|
<dt></dt>
|
|
<dt><a>选择卖方数据</a></dt>
|
|
</dl>
|
|
<div class="input-text">
|
|
<div>
|
|
<label>成交价格:</label> <input type="text" placeholder="" />
|
|
</div>
|
|
<div>
|
|
<label>成交数量:</label> <input type="text" placeholder="" />
|
|
</div>
|
|
<div>
|
|
<label>成交时间:</label> <input type="text" style="outline: none;" class="easyui-datetimebox" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="foot-add">
|
|
<button class="btn btn-danger">添加</button>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
var transHtml = '<div v-for="item in transfer" class="panel panel-warning">\
|
|
<div class="panel-heading" >\
|
|
<span class="panel-title" style="font-size: 16px;font-weight: 100;color: #d89008;">买卖方数据</span>\
|
|
<span class="panel-title remove glyphicon glyphicon-remove"></span>\
|
|
</div >\
|
|
<div class="panel-body">\
|
|
<dl>\
|
|
<dt>买方价格:</dt>\
|
|
<dd>{{item.detail1.Price}}</dd>\
|
|
<dt>买方品种：</dt>\
|
|
<dd>{{item.detail1.Variety}}</dd>\
|
|
<dt>买方重量/KG: </dt>\
|
|
<dd>{{item.detail1.Weight}}</dd>\
|
|
<dt>买方公母：</dt>\
|
|
<dd>{{item.detail1.Sex}}</dd>\
|
|
<dt>买方公司：</dt>\
|
|
<dd>{{item.detail1.Company}}</dd>\
|
|
<dt>买方联系人：</dt>\
|
|
<dd>{{item.detail1.Contact}}</dd>\
|
|
<dt>买方所在地：</dt>\
|
|
<dd class="clip">{{item.detail1.Location}}</dd>\
|
|
<dt></dt>\
|
|
<dt><a>选择买方数据</a></dt>\
|
|
</dl>\
|
|
<dl>\
|
|
<dt>卖方价格:</dt>\
|
|
<dd>{{item.detail2.Price}}</dd>\
|
|
<dt>卖方品种：</dt>\
|
|
<dd>{{item.detail2.Variety}}</dd>\
|
|
<dt>卖方重量/KG: </dt>\
|
|
<dd>{{item.detail2.Weight}}</dd>\
|
|
<dt>卖方公母：</dt>\
|
|
<dd>{{item.detail2.Sex}}</dd>\
|
|
<dt>卖方公司：</dt>\
|
|
<dd>{{item.detail2.Company}}</dd>\
|
|
<dt>卖方联系人：</dt>\
|
|
<dd>{{item.detail2.Contact}}</dd>\
|
|
<dt>卖方所在地：</dt>\
|
|
<dd class="clip">{{item.detail2.Location}}</dd>\
|
|
<dt></dt>\
|
|
<dt><a>选择卖方数据</a></dt>\
|
|
</dl>\
|
|
<div class="input-text">\
|
|
<div>\
|
|
<label>成交价格:</label> <input type="text" placeholder="" v-model="item.Price" />\
|
|
</div>\
|
|
<div>\
|
|
<label>成交数量:</label> <input type="text" placeholder="" v-model="item.Qty"/>\
|
|
</div>\
|
|
<div>\
|
|
<label>成交时间:</label> <input type="text" style="outline: none;" class="easyui-datetimebox" v-model="item.CreateDate"/>\
|
|
</div>\
|
|
</div>\
|
|
</div>\
|
|
</div>\
|
|
<div class="foot-add">\
|
|
<button class="btn btn-danger" onClick="addTrans()">添加</button>\
|
|
</div>';
|
|
|
|
|
|
var vm;
|
|
function add() {
|
|
$("#vue1").append('<div id="app1">' + transHtml+'</div>');
|
|
if (vm) {
|
|
return;
|
|
}
|
|
vm = new Vue({
|
|
el: "#app1",
|
|
data: {
|
|
transfer: [
|
|
{
|
|
Price: 12,
|
|
Qty: 200,
|
|
CreateDate:'2018-11-15',
|
|
detail1: {
|
|
Contact: '1',
|
|
Variety: 'xx',
|
|
Weight: '',
|
|
Price: '',
|
|
Location: '',
|
|
Company: '',
|
|
Sex: ''
|
|
},
|
|
detail2: {
|
|
Contact: '1',
|
|
Variety: '',
|
|
Weight: '',
|
|
Price: '',
|
|
Location: '',
|
|
Company: '',
|
|
Sex: ''
|
|
}
|
|
}],
|
|
dt: '1234567有没有加载成功'
|
|
},
|
|
methods: {
|
|
add: function () {
|
|
this.items.push({ text: "第四组" });
|
|
this.items.splice(0, 1);
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
</script> |