提交 8222d9f3 编写于 作者: alex.zhang's avatar alex.zhang

手机端页面UI适配

上级 7df17e6c
<template>
<div class="data-view-message-wrap">
<template v-if="searchTableVisible">
<el-row class="button-wrap">
<el-col :span="1" style="margin-left: 20px;width: 70px;margin-top: 4px">
<label style="font-size: 16px;">标记状态</label>
</el-col>
<el-select
v-model="labelStatus"
size="small"
placeholder="请选择"
clearable
style="margin-left: 0px;width:180px"
>
<el-option
v-for="item in dataProjectStates"
:key="item.id"
:label="item.value"
:value="item.id"
></el-option>
</el-select>
<el-link style="margin-left:40px">备注</el-link>
<el-input
v-model="remark"
size="small"
style="width:180px;"
class="input"
placeholder
clearable
></el-input>
<el-button class="each-button" type="primary" @click="labelVisible=true">添加标签筛选</el-button>
<el-button class="each-button" type="primary" @click="handleSearch">查询</el-button>
<el-button
class="each-button"
type="primary"
@click="showExportModal"
v-if="showExportBtn"
>导出</el-button>
<el-button class="each-button" type="primary" @click="showAddConditionModal(true)">添加筛选条件</el-button>
</el-row>
<div class="class-top-row">
<el-row class="button-wrap">
<el-col :span="1" style="margin-left: 20px;width: 70px;margin-top: 4px">
<label style="font-size: 16px;">标记状态</label>
</el-col>
<el-select
v-model="labelStatus"
size="small"
placeholder="请选择"
clearable
style="margin-left: 0px;width:180px"
>
<el-option
v-for="item in dataProjectStates"
:key="item.id"
:label="item.value"
:value="item.id"
></el-option>
</el-select>
<el-link style="margin-left:40px">备注</el-link>
<el-input
v-model="remark"
size="small"
style="width:180px;"
class="input"
placeholder
clearable
></el-input>
</el-row>
<el-row class="button-wrap">
<el-button class="each-button" type="primary" @click="labelVisible=true">添加标签筛选</el-button>
<el-button class="each-button" type="primary" @click="handleSearch">查询</el-button>
<el-button
class="each-button"
type="primary"
@click="showExportModal"
v-if="showExportBtn"
>导出</el-button>
<el-button class="each-button" type="primary" @click="showAddConditionModal(true)">添加筛选条件</el-button>
</el-row>
</div>
<template
v-if="tableDataList && tableDataList.outModels && tableDataList.outModels.length > 0">
v-if="tableDataList && tableDataList.outModels && tableDataList.outModels.length > 0"
>
<el-table
:data="tableDataList.outModels"
:row-style="getRowClass"
......@@ -94,7 +99,7 @@
:value="item.id"
></el-option>
</el-select>
</template> -->
</template>-->
</el-table-column>
</el-table>
<!-- 分页 -->
......@@ -188,10 +193,10 @@
</el-dialog>
<!-- 添加标签筛选条件弹窗 -->
<el-dialog title="标签筛选条件" :visible.sync="labelVisible" width="400px" center>
<div v-if="dataProjectLabels" v-for="(item,i) in dataProjectLabels" align="center">
<div class="same-line-class" style="margin-right:20px;">{{item.labelValue}}</div>
<div class="same-line-class">
<el-dialog title="标签筛选条件" :visible.sync="labelVisible" width="300px" center>
<div style="display: flex;margin-top:10px;" v-if="dataProjectLabels" v-for="(item,i) in dataProjectLabels">
<div class="same-line-class" style="margin-right:10px;margin-top:10px;">{{item.labelValue}}</div>
<div class="input-comp">
<el-input v-model="dataProjectContents[i]" size="small" />
</div>
</div>
......@@ -203,9 +208,9 @@
<!-- 添加设置标签弹窗 -->
<el-dialog title="设置标签" :visible.sync="setLabelVisible" width="300px" center>
<div v-if="dataProjectLabels" v-for="(item, i) in dataProjectLabels" align="center">
<div class="same-line-class" style="margin-right:20px;">{{item.labelValue}}</div>
<div class="same-line-class">
<div style="display: flex;margin-top:10px;" v-if="dataProjectLabels" v-for="(item, i) in dataProjectLabels" align="center">
<div class="same-line-class" style="margin-right:10px;margin-top:10px;">{{item.labelValue}}</div>
<div class="input-comp">
<el-input v-model="setLabelList[i]" size="small" />
</div>
</div>
......@@ -256,13 +261,8 @@
</el-dialog>
<!-- 拨号弹窗 -->
<el-dialog
title="拨号"
:visible.sync="dialVisible"
width="300px"
center
>
<a :href="'tel:' + dialPhoneNum">拨打电话给: {{dialPhoneNum}}</a>
<el-dialog title="拨号" :visible.sync="dialVisible" width="300px" center>
<a :href="'tel:' + dialPhoneNum">拨打电话给: {{dialPhoneNum}}</a>
<span slot="footer" class="dialog-footer">
<!-- <el-button type="primary" @click="gotoDialPhone">确 定</el-button> -->
<el-button @click="dialVisible = false">取 消</el-button>
......@@ -280,11 +280,7 @@
</el-dialog>
<!-- 浏览器检测弹窗 -->
<el-dialog
title="当前不是chome浏览器,去下载?"
:visible.sync="browserVisible"
width="300px"
>
<el-dialog title="当前不是chome浏览器,去下载?" :visible.sync="browserVisible" width="300px">
<span slot="footer" class="dialog-footer">
<el-button @click="down">确定</el-button>
<el-button @click="browserVisible = false">取 消</el-button>
......@@ -743,7 +739,7 @@ export default {
// vm.historyLabelList.menus.length
// );
if (vm.dataProjectLabels == null || vm.dataProjectLabels == "") {
vm.$message.info("未设置过标签")
vm.$message.info("未设置过标签");
}
} else {
vm.$message.error(res.message);
......@@ -795,7 +791,7 @@ export default {
//拨号
dialPhone(row) {
console.log("tableDataList.columnList() : " + row.column1)
console.log("tableDataList.columnList() : " + row.column1);
vm.dialPhoneNum = row.column1;
vm.dialVisible = true;
},
......@@ -882,31 +878,39 @@ export default {
checkChrome() {
// return (navigator.appVersion.indexOf('Chrome') || navigator.appVersion.indexOf('chrome')) != -1;
return this.getBroswer().broswer=='Chrome'
return this.getBroswer().broswer == "Chrome";
},
getBroswer() {
let sys = {};
let ua = navigator.userAgent.toLowerCase();
let s;
(s = ua.match(/edge\/([\d.]+)/)) ? sys.edge = s[1] :
(s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1] :
(s = ua.match(/msie ([\d.]+)/)) ? sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? sys.safari = s[1] : 0;
if (sys.edge) return { broswer : "Edge", version : sys.edge };
if (sys.ie) return { broswer : "IE", version : sys.ie };
if (sys.firefox) return { broswer : "Firefox", version : sys.firefox };
if (sys.chrome) return { broswer : "Chrome", version : sys.chrome };
if (sys.opera) return { broswer : "Opera", version : sys.opera };
if (sys.safari) return { broswer : "Safari", version : sys.safari };
return { broswer : "", version : "0" };
(s = ua.match(/edge\/([\d.]+)/))
? (sys.edge = s[1])
: (s = ua.match(/rv:([\d.]+)\) like gecko/))
? (sys.ie = s[1])
: (s = ua.match(/msie ([\d.]+)/))
? (sys.ie = s[1])
: (s = ua.match(/firefox\/([\d.]+)/))
? (sys.firefox = s[1])
: (s = ua.match(/chrome\/([\d.]+)/))
? (sys.chrome = s[1])
: (s = ua.match(/opera.([\d.]+)/))
? (sys.opera = s[1])
: (s = ua.match(/version\/([\d.]+).*safari/))
? (sys.safari = s[1])
: 0;
if (sys.edge) return { broswer: "Edge", version: sys.edge };
if (sys.ie) return { broswer: "IE", version: sys.ie };
if (sys.firefox) return { broswer: "Firefox", version: sys.firefox };
if (sys.chrome) return { broswer: "Chrome", version: sys.chrome };
if (sys.opera) return { broswer: "Opera", version: sys.opera };
if (sys.safari) return { broswer: "Safari", version: sys.safari };
return { broswer: "", version: "0" };
},
down() {
window.location.href = 'http://www.google.cn/chrome/';
window.location.href = "http://www.google.cn/chrome/";
},
sendRequest(type, url, params, callback) {
......@@ -981,13 +985,19 @@ export default {
color: #606266;
font-size: 14px;
}
.button-wrap {
margin: 20px 0;
.each-button {
float: right;
margin: 0 15px 0 5px;
.class-top-row {
overflow-x: scroll;
.button-wrap {
margin: 20px 0;
width: 600px;
.each-button {
// float: right;
margin: 0px 0px 0 20px;
}
}
}
.el-table {
-webkit-overflow-scrolling: touch;
}
......@@ -1089,8 +1099,11 @@ export default {
background: rgba(255, 255, 255, 0.2);
}
.same-line-class {
margin-top: 20px;
// margin-top: 10px;
display: inline-block;
.input-comp {
width: 100px;
}
}
}
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册