Commit d4653c9b authored by youjie's avatar youjie

意见调查

parent f2fdf0da
.row{
display: flex;
}
.row-w{
display: flex;
flex-wrap: wrap;
}
.row-aic-w{
display: flex;
flex-wrap: wrap;
align-items: center;
}
.row-aic-n{
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.q-mr-md{
margin-right: 32rpx;
}
.q-ml-md{
margin-left: 32rpx;
}
.q-mt-md{
margin-top: 32rpx !important;
}
.q-mb-md{
margin-bottom: 32rpx;
}
.q-mr-sm{
margin-right: 16rpx;
}
.q-ml-sm{
margin-left: 16rpx;
}
.q-mt-sm{
margin-top: 16rpx;
}
.q-mb-sm{
margin-bottom: 16rpx;
}
.flex-grid{
margin-left: -16rpx;
margin-bottom: -16rpx;
}
.flex-wrap{
flex-wrap: wrap;
}
.col-t-b{
width: calc(50% - 16rpx);
margin: 0 0 16rpx 16rpx
}
.col-f-b{
width: calc(25% - 16rpx);
margin: 0 0 16rpx 16rpx
}
.row-ajc-w{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.row-ajc-n{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.row-acje{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: end;
}
.text-center{
text-align: center;
}
.text-input{
background: #F1F2F4;
/* height: 60rpx; */
border-radius: 12rpx;
padding: 12rpx;
font-size: 28rpx;
color: #111111;
}
.text-input:focus,
.text-input:active{
background-color: #111111;
color:#F1F2F4;
}
.text-input::placeholder{
font-size: 24rpx;
}
.row-sb-n{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
}
.row-sbs-n{
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: nowrap;
}
.row-sbas-n{
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
}
.row-sb-w{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.items-center{
align-items: center;
}
.items-start{
align-items: start;
}
.justify-center{
justify-content: center;
}
.flex1,.col{
flex: 1;
}
.flexG{
flex-grow: 1;
}
.flexS{
flex-shrink: 0;
}
.text-right{
text-align: right;
}
.column{
display: flex;
flex-direction: column;
}
.column-jc{
display: flex;
flex-direction: column;
justify-content: center;
}
.column-ajc{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.block{
display: block;
}
.inlineblock{
display: inline-block;
}
.hidden{
overflow: hidden;
}
.fixed{
position: fixed;
}
.fixedHeader{
left: 0;
right: 0;
top: 0;
}
.fixedFooter{
border-radius: 50rpx 50rpx 0px 0px;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
border-radius: 20rpx;
}
.relative{
position: relative;
}
.absolute{
position: absolute;
}
.z-index1{
z-index: 1;
}
.z-index2{
z-index: 2;
}
.z-index3{
z-index: 3;
}
.z-index4{
z-index: 4;
}
.fontWeight400{
font-weight: 400;
}
.fontBold{
font-weight: bold;
}
.nowrap{
white-space: nowrap;
}
.ellipsis1{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.width100{
width: 100rpx;
}
.width436{
width: 436rpx;
}
.width100One{
width: 100%;
}
.width45vh{
width: 44vh;
}
.textCenter{
text-align: center;
}
.textRight{
text-align: right;
}
.fz14{
font-size: 14rpx;
}
.fz16{
font-size: 16rpx;
}
.fz17{
font-size: 17rpx;
}
.fz18{
font-size: 18rpx;
}
.fz19{
font-size: 19rpx;
}
.fz20{
font-size: 20rpx;
}
.fz21{
font-size: 21rpx;
}
.fz22{
font-size: 22rpx;
}
.fz24{
font-size: 24rpx;
}
.fz26{
font-size: 26rpx;
}
.fz28{
font-size: 28rpx;
}
.fz30{
font-size: 30rpx;
}
.fz36{
font-size: 36rpx;
}
.fz34{
font-size: 34rpx;
}
.fz40{
font-size: 40rpx;
}
.fz42{
font-size: 42rpx;
}
.fz52{
font-size: 52rpx;
}
.ML5{
margin-left: 5rpx;
}
.ML10{
margin-left: 10rpx;
}
.ML15{
margin-left: 15rpx;
}
.ML20{
margin-left: 20rpx;
}
.ML25{
margin-left: 25rpx;
}
.ML30{
margin-left: 30rpx;
}
.ML31{
margin-left: 31rpx;
}
.ML40{
margin-left: 40rpx;
}
.ML50{
margin-left: 50rpx;
}
.ML60{
margin-left: 60rpx;
}
.ML70{
margin-left: 70rpx;
}
.MR5{
margin-right: 5rpx;
}
.MR10{
margin-right: 10rpx;
}
.MR15{
margin-right: 15rpx;
}
.MR20{
margin-right: 20rpx;
}
.MR25{
margin-right: 25rpx;
}
.MR30{
margin-right: 30rpx;
}
.MR40{
margin-right: 40rpx;
}
.MR50{
margin-right: 50rpx;
}
.MR60{
margin-right: 60rpx;
}
.MT10{
margin-top: 10rpx;
}
.MT15{
margin-top: 15rpx;
}
.MT20{
margin-top: 20rpx;
}
.MT25{
margin-top: 25rpx;
}
.MT30{
margin-top: 30rpx;
}
.MT31{
margin-top: 31rpx;
}
.MT35{
margin-top: 35rpx;
}
.MT38{
margin-top: 38rpx;
}
.MT40{
margin-top: 40rpx;
}
.MT45{
margin-top: 45rpx;
}
.MT50{
margin-top: 50rpx;
}
.MT60{
margin-top: 60rpx;
}
.MT64{
margin-top: 64rpx;
}
.MT75{
margin-top: 75rpx;
}
.MB5{
margin-bottom: 5rpx;
}
.MB10{
margin-bottom: 10rpx;
}
.MB20{
margin-bottom: 20rpx;
}
.MB30{
margin-bottom: 30rpx;
}
.MB35{
margin-bottom: 35rpx;
}
.MB40{
margin-bottom: 40rpx;
}
.MB43{
margin-bottom: 43rpx;
}
.MB50{
margin-bottom: 50rpx;
}
.MB52{
margin-bottom: 52rpx;
}
.MB55{
margin-bottom: 55rpx;
}
.MB70{
margin-bottom: 70rpx;
}
.MB255{
margin-bottom: 255rpx;
}
.PT20{
padding-top: 20rpx;
}
.PT38{
padding-top: 38rpx;
}
.PT65{
padding-top: 65rpx;
}
.PT123{
padding-top: 123rpx;
}
.PB20{
padding-bottom: 20rpx;
}
.PB200{
padding-bottom: 200rpx;
}
.PB260{
padding-bottom: 260rpx;
}
.PB300{
padding-bottom: 300rpx;
}
.PY20{
padding: 20rpx 0;
}
.PY53{
padding: 53rpx 0;
}
.PX4{
padding: 0 4rpx;
}
.PX10{
padding: 0 10rpx;
}
.PX20{
padding: 0 20rpx;
}
.PX50{
padding: 0 50rpx;
}
.PX53{
padding: 0 53rpx;
}
.relativeFT5{
top: -5rpx;
}
.relativeFT8{
top: -8rpx;
}
.relativeFT10{
top: -10rpx;
}
.color9999A6{
color: #9999A6;
}
.color9999A5{
color: #9999A5;
}
.colorDEBF7B{
color: #DEBF7B;
}
.colorC09D4F{
color: #C09D4F;
}
.colorFF5858{
color: #FF5858;
}
.color1D1D20 {
color: #1D1D20;
}
.color111 {
color: #111111;
}
.color000 {
color: #000;
}
.colorFFF {
color: #FFF;
}
.colorC6C1BC{
color: #C6C1BC;
}
.colorE1C278{
color: #E1C278;
}
.color2EC726{
color: #2EC726;
}
.bgFFF{
background: #fff;
}
.bgF5{
background: #f5f5f5;
}
.bgECF1F4{
background: #ECF1F4;
}
.bgDEBF7B{
background: #DEBF7B;
}
.bg9BC75D{
background: #9BC75D;
}
.bgFF5858{
background: #FF5858;
}
.bgE1C278{
background: #E1C278;
}
.bg111{
background: #111111;
}
.bgF2EEE5{
background: #F2EEE5;
}
.border1{
border: 1px solid;
}
.borderDEBF7B{
border-color: #DEBF7B;
}
.borderF5{
border-color: #F5F5F5;
}
.borderFF5858{
border-color: #FF5858;
}
.height-line1{
width: 100%;
height: 0;
border-bottom: 1px #ECF1F4 solid;
}
.height-line2{
width: 100%;
height: 0;
border-bottom: 2px #ECF1F4 solid;
}
.width-lineH83{
width: 2px;
height: 83rpx;
}
.width-lineH49{
width: 2px;
height: 49rpx;
}
.lineC8C8CF{
border-color: #C8C8CF;
}
.lineFF5858{
border-bottom: 1px #FF5858 solid;
}
.height-dashed1{
width: 100%;
height: 0;
border-bottom: 1px #D7D7DC dashed;
}
.DashedECF1F4{
border-color: #ECF1F4;
}
.height100vh{
height: 100vh;
}
.height100{
height: 100%;
}
.height1057{
height: 1057rpx;
}
.WH12R50{
width: 12rpx;
height: 12rpx;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.WH6R50{
width: 6rpx;
height: 6rpx;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
<meta name="screen-orientation" content="portrait">
</meta>
<meta name="x5-orientation" content="portrait">
</meta>
<!-- <link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon" /> -->
<link rel="stylesheet" href="../../css/bts/bootstrap.min.css">
<link rel="stylesheet" href="../../css/flex.css">
<title></title>
</head>
<body class="opiSurBody">
<div class="opiSurCenter column" id="opiSurCenter">
<div class="BackBox">
<!-- <img class="BackImg" onclick="goBack()" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638784097665175968.png" /> -->
<div class="BackTitle headerTitle"></div>
</div>
<div>
<img style="width: 100%;height: auto;display: block;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638785124854057085.jpg" >
<div class="TeamPeriodBox">
<img style="width: 100%;height: auto;display: block;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638785125079862802.jpg" >
<div class="TeamPeriodC">
<div class="TeamPeriod">
<p>团期:<span class="tuanqi1"></span></p>
</div>
<div class="LeaInfCenter">
<div class="LeaderInfor row-sb-n">
<div>
领队:
<span class="lindui"></span>
</div>
<div>
导游:
<span class="daoyou"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="height: 1px;flex: 1;">
<div class="opiSurStarBox" id="app">
</div>
<div class="SubmitButton">
<button class="submitB" onclick="saveGuestSurvey()" id="submitB">提交</button>
</div>
</div>
</div>
<script src="../../js/md5.js"></script>
<script type="text/javascript" src="../../js/autosize.js"></script>
<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
<script src="../../js/layer/layer.js"></script>
<script src="../../js/mian.js"></script>
<script>
var qMsg = query()
var priceInfo = null
var guestInfor = null
var dataList = null
var GuestSurveyInfo = null
var texts = [
'非常不满意',
'不满意',
'感觉一般',
'满意',
'非常满意'
]
var STAR_IMG = new Array("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638784207574961128.png", "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638784207629848908.png");
$('.ganxiecydc').html('感谢' + decodeURIComponent(qMsg.SurName) + (qMsg.Sex == 1 ? "先生" : "女士") + '参与意见调查')
getPriceInfo()
GuestByPhone()
GetSurveyShowList()
getRadio()
getCheckbox()
GetBusSurveyInfo()
function clickRadio(i) {
const Radiobox = document.getElementById(`my_Radio${i}`);
Radiobox.click()
}
function getRadio() {
dataList.forEach((x, i) => {
x.SurveyOptionsList.forEach((y, index) => {
const radios = document.getElementsByName(`my_Radio${i+1}`);
radios.forEach(radio => {
radio.addEventListener('click', function() {
x.ScoreNum = radio.value
});
});
})
})
}
function clickCheckbox(i) {
const checkbox = document.getElementById(`my_checkbox${i}`);
checkbox.click()
}
function getCheckbox() {
dataList.forEach((x, i) => {
x.SurveyOptionsList.forEach((y, index) => {
const checkbox = document.getElementsByName(`my_checkbox${i+1}`);
checkbox.forEach(checkbox => {
checkbox.addEventListener('click', function() {
x.ScoreNum = checkbox.value
if (checkbox.checked) y.IsCheckS.push(checkbox.value)
if (!checkbox.checked)
y.IsCheckS = y.IsCheckS.filter(z => {
return z != checkbox.value
})
});
});
})
})
}
function getTextarea() {
dataList.forEach((x, i) => {
var word = document.getElementById(`my_textarea${i+1}`)
if (word && word.value) {
x.TextContent = word.value
}
})
}
function getTextContent(i,x) {
var word = document.getElementById(`my_textarea${i}`)
if (x.TextContent) {
word.value = x.TextContent
}
}
function saveGuestSurvey() {
document.getElementById("submitB").classList.add("active")
getTextarea()
var postMsg = [];
if (dataList && dataList.length > 0) {
dataList.forEach(item => {
item.GuestId = qMsg.GuestId;
item.TCID = qMsg.TCID;
item.OrderID = qMsg.OrderId;
if (item.SurveyType === 2 || item.SurveyType === 3) {
item.SurveyOptionsList.forEach(y => {
//单选
if (item.SurveyType == 2) {
y.IsCheck = "0"
if (item.ScoreNum == y.ID) {
y.IsCheck = "1";
}
}
//多选
if (item.SurveyType == 3) {
y.IsCheck = "0";
var findIndex = null
if(y.IsCheckS.length>0) findIndex = y.IsCheckS.filter(z => { return z == y.ID})
if (findIndex&&findIndex[0]==y.ID) {
y.IsCheck = "1";
}
}
})
// item.ScoreNum = 0;
}
postMsg.push(item);
})
}
// console.log(postMsg,'--------------')
// return;
$.ajax({
type: "POST",
url: `${getApiUrl().urlPost}`,
contentType: "application/json",
data: getAjaxData("survey_post_SetGuestSurvey", postMsg),
async: false,
success: function(res) {
if (res.resultCode === 1) {
window.location.href = 'surveySuccess.html'
} else {
layer.msg(res.message)
}
$('#submitB').attr('disabled', false)
document.getElementById("submitB").classList.remove("active")
},
error: function(message) {
$('#submitB').attr('disabled', false)
alert(JSON.stringify(message));
document.getElementById("submitB").classList.remove("active")
}
});
}
function GetBusSurveyInfo() {
$.ajax({
type: "POST",
url: `${getApiUrl().urlPost}`,
contentType: "application/json",
data: getAjaxData("survey_post_GetGuestSurveyInfo", {
IsShow: 1,
SurveyType: -1
}),
async: false,
success: function(res) {
if (res.resultCode === 1) {
GuestSurveyInfo = res.data
if (GuestSurveyInfo.Title) $('.headerTitle').html(GuestSurveyInfo.Title)
if (GuestSurveyInfo.SubTitle) $('.subscript').html(GuestSurveyInfo.SubTitle)
} else {
layer.msg(res.message)
}
},
error: function(message) {
alert(JSON.stringify(message));
}
});
}
function GetSurveyShowList() {
$.ajax({
type: "POST",
url: `${getApiUrl().urlPost}`,
contentType: "application/json",
data: getAjaxData("post_Get2025SurveyShowList", {
TCID: qMsg.TCID,
GuestId: qMsg.GuestId
}),
async: false,
success: function(res) {
if (res.resultCode === 1) {
let data = res.data
data.map(item => {
if (item.SurveyType === 2) {
item.SurveyOptionsList.map((cItem, cIndex) => {
cItem.IsCheckS = false
})
}
if (item.SurveyType === 3) {
item.SurveyOptionsList.map((cItem, cIndex) => {
cItem.IsCheckS = []
})
}
if (item.SurveyType === 1) {
item.ScoreNum = item.ScoreNum?item.ScoreNum:5;
}
})
setTimeout(() => {
data.forEach((x, i) => {
x.SurveyOptionsList.forEach((y, index) => {
if (x.SurveyType==2&&y.IsCheck == "1") {
clickRadio(`${i+1}${index+1}`)
}
if (x.SurveyType==3&&y.IsCheck == "1") {
clickCheckbox(`${i+1}${index+1}`)
}
})
if (x.SurveyType==4) {
getTextContent(i+1,x)
}
})
}, 500);
dataList = data
renderStar()
} else {
layer.msg(res.message)
}
},
error: function(message) {
alert(JSON.stringify(message));
}
});
}
function getPriceInfo() {
$.ajax({
type: "POST",
url: `${getApiUrl().urlPost}`,
contentType: "application/json",
data: getAjaxData("post_GetPriceBaseInfo", {
TCID: qMsg.TCID,
}),
async: false,
success: function(res) {
if (res.resultCode === 1) {
let data = res.data
priceInfo = data
if (priceInfo && priceInfo.LeaderName && priceInfo.LeaderName != '') $('.lindui').html(priceInfo.LeaderName)
if (priceInfo && priceInfo.GuideName && priceInfo.GuideName != '') $('.daoyou').html(priceInfo.GuideName)
if (priceInfo && priceInfo.StartDate && priceInfo.StartDate != '') $('.tuanqi1').html(priceInfo.StartDate)
} else {
layer.msg(res.message)
}
},
error: function(message) {
alert(JSON.stringify(message));
}
});
}
function GuestByPhone() {
$.ajax({
type: "POST",
url: `${getApiUrl().urlPost}`,
contentType: "application/json",
data: getAjaxData("post_GetOrderGuestByPhone", {
TCID: qMsg.TCID,
Phone: qMsg.Phone,
}),
async: false,
success: function(res) {
if (res.resultCode === 1) {
let data = res.data
guestInfor = data
if(guestInfor.code==1&&guestInfor.isend==1){
document.getElementById("submitB").classList.add("display")
$('#submitB').attr('disabled', true)
}
} else {
layer.msg(res.message)
}
},
error: function(message) {
alert(JSON.stringify(message));
}
});
}
function chgStar(num, i) {
dataList[i].ScoreNum = num
var item = dataList[i]
$(`#star${i+1}`).html(
`<img id="star_1id_${i+1}point" onmouseover="chgStar(1,${i})"
src="${item.ScoreNum>=1?STAR_IMG[0]:STAR_IMG[1]}"></img>
<img id="star_2id_${i+1}point" onmouseover="chgStar(2,${i})"
src="${item.ScoreNum>=2?STAR_IMG[0]:STAR_IMG[1]}"></img>
<img id="star_3id_${i+1}point" onmouseover="chgStar(3,${i})"
src="${item.ScoreNum>=3?STAR_IMG[0]:STAR_IMG[1]}"></img>
<img id="star_4id_${i+1}point" onmouseover="chgStar(4,${i})"
src="${item.ScoreNum>=4?STAR_IMG[0]:STAR_IMG[1]}"></img>
<img id="star_5id_${i+1}point" onmouseover="chgStar(5,${i})"
src="${item.ScoreNum>=5?STAR_IMG[0]:STAR_IMG[1]}"></img>`
)
$(`#StarRating_${i+1}`).html(`${item.ScoreNum==1?texts[0]:item.ScoreNum==2?texts[1]:item.ScoreNum==3?texts[2]:item.ScoreNum==4?texts[3]:item.ScoreNum==5?texts[4]:''}`)
if(item.ScoreNum>=4)$(`#StarRating_${i+1}`).addClass('active')
else $(`#StarRating_${i+1}`).removeClass('active')
}
function renderStar() {
var list = []
dataList.forEach((item, i) => {
var str = ''
var mark = ''
var singleChoice = ''
var MultipleChoice = ''
var inputText = ''
var end = `</div>`
var element = document.createElement('div');
str =
`
<div class="opiSurTitle">${i+1}${item.Title}</div>
`
if (item.SurveyType == 1) mark =
`
<div class="opiSurStarCenter">
<span class="opiSurCenText">评分</span>
<div class="opiSurCenStar" id="star${i+1}">
<img id="star_1id_${i+1}point" onmouseover="chgStar(1,${i})"
src="${item.ScoreNum>=1?STAR_IMG[0]:STAR_IMG[1]}"></img>
<img id="star_2id_${i+1}point" onmouseover="chgStar(2,${i})"
src="${item.ScoreNum>=2?STAR_IMG[0]:STAR_IMG[1]}"></img>
<img id="star_3id_${i+1}point" onmouseover="chgStar(3,${i})"
src="${item.ScoreNum>=3?STAR_IMG[0]:STAR_IMG[1]}"></img>
<img id="star_4id_${i+1}point" onmouseover="chgStar(4,${i})"
src="${item.ScoreNum>=4?STAR_IMG[0]:STAR_IMG[1]}"></img>
<img id="star_5id_${i+1}point" onmouseover="chgStar(5,${i})"
src="${item.ScoreNum>=5?STAR_IMG[0]:STAR_IMG[1]}"></img>
</div>
<span class="opiSurCenTisp col ${item.ScoreNum>=4?'active':''}" id="StarRating_${i+1}">${item.ScoreNum==1?texts[0]:item.ScoreNum==2?texts[1]:item.ScoreNum==3?texts[2]:item.ScoreNum==4?texts[3]:item.ScoreNum==5?texts[4]:''}</span>
</div>
`
if (item.SurveyType == 2) {
let radioList = []
if (item.SurveyOptionsList.length > 0) item.SurveyOptionsList.forEach((radio, index) => {
radioList.push(
`
<div class="opiSurCenCheck">
<input type="radio" color="#0039B8" value="${radio.ID}" name="my_Radio${i+1}" id="my_Radio${i+1}${index+1}"/><span onclick="clickRadio(${i+1}${index+1})">${radio.OptionsName}</span>
</div>
`
)
})
if (radioList.length > 0) {
singleChoice = `<div class="opiSurStarCenter">`
radioList.forEach(rItem => {
singleChoice += rItem;
})
singleChoice += `</div>`
}
}
if (item.SurveyType == 3) {
let MultipleList = []
if (item.SurveyOptionsList.length > 0) item.SurveyOptionsList.forEach((radio, index) => {
MultipleList.push(
`
<div class="opiSurCenCheckCom">
<input type="checkbox" color="#0039B8" value="${radio.ID}" name="my_checkbox${i+1}" id="my_checkbox${i+1}${index+1}"/><span onclick="clickCheckbox(${i+1}${index+1})">${radio.OptionsName}</span>
</div>
`
)
})
if (MultipleList.length > 0) {
MultipleChoice = `<div class="opiSurStarCenter column">`
MultipleList.forEach(rItem => {
MultipleChoice += rItem;
})
MultipleChoice += `</div>`
}
}
if (item.SurveyType == 4) {
inputText =
`
<div class="opiSurStarCenter column">
<textarea rows="4" cols="30" placeholder="点击输入" maxlength="500" id="my_textarea${i+1}" onblur="getTextarea()"></textarea>
</div>
`
}
var textHtml = str + mark + singleChoice + MultipleChoice + inputText + end
element.innerHTML = textHtml
list.push(element)
})
$("#app").html(list)
}
</script>
</body>
<style>
.opiSurBody{
position: relative;
left: 0;
right: 0;
bottom: 0;
/* background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638784094475156580.png')no-repeat 0 0 #9CD2F8;
background-size: 100% auto; */
background:#9CD2F8;
height: 100vh;
width: 100vw;
overflow: auto;
}
.opiSurCenter{
}
.BackBox {
/* position: fixed;
left: 0;
top: 0;
right: 0; */
/* background: #fff; */
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: 2;
padding: 20px 20px 10px 20px;
}
.BackImg {
width: 10px;
}
.BackTitle{
height: 50px;
/* position: fixed;
top: 20px;
left: 0;
right: 0; */
position: absolute;
left: 0;
right: 0;
top: 20px;
z-index: 2;
text-align: center;
font-size: 16px;
}
.TeamPeriodBox{
position: relative;
}
.TeamPeriodC{
position: absolute;
left: 0;
right: 0;
top: 20px;
z-index: 2;
padding: 0 16.13vw;
}
.TeamPeriod{
text-align: center;
margin-top: 0;
}
.TeamPeriod p{
padding: 0 24px;
display: inline-block;
height: 30px;
background: #0039B8;
border-radius: 15px;
font-weight: bold;
font-size: 16px;
color: #FFFFFF;
line-height: 30px;
}
.LeaInfCenter{
width: 260px;
/* padding: 0 64px; */
margin: auto;
margin-top: 1.61vh;
}
.LeaderInfor{
height: 36px;
line-height: 36px;
background: #B9DBF7;
border-radius: 7px;
font-weight: bold;
font-size: 16px;
color: #080A0A;
padding: 0 30px;
}
.LeaderInfor span{
margin-left: 5px;
}
.opiSurStarBox{
padding: 20px 20px 24px 20px;
margin: 0 15px 45px 15px;
background: #FFFFFF;
border-radius: 9px;
position: relative;
top: -47px;
}
.opiSurTitle{
font-weight: 500;
font-size: 16px;
color: #080A0A;
line-height: 35px;
margin-bottom: 0px;
}
.opiSurStarCenter{
font-weight: 500;
font-size: 16px;
color: #080A0A;
line-height: 35px;
margin-bottom: 10px;
}
.opiSurCenText{
margin-right: 20px;
}
.opiSurCenStar{
display: inline-block;
}
.opiSurCenStar img{
width: 20px;
height:20px;
display: inline-block;
margin-right: 5px;
position: relative;
top: -3px;
}
.opiSurCenTisp{
margin-left: 30px;
}
.opiSurCenTisp.active{
color: #FF3166;
}
.opiSurCenCheck{
display: inline-block;
margin-right: 20px;
}
.opiSurCenCheck span{
margin-left: 5px;
}
.opiSurCenCheckCom span{
margin-left: 5px;
}
.opiSurStarCenter textarea {
width: 100%;
padding: 5px 15px;
background: #F3F1EF;
border: 1px solid #F3F1EF;
border-radius: 9px;
margin-top: 5px;
font-size: 16px;
}
.opiSurStarCenter textarea:focus {
border: 1px solid #76c9fa;
outline: none;
}
.SubmitButton{
padding: 0 15px;
margin-top: 25px;
margin-bottom: 43px;
}
.submitB{
width: 100%;
height: 50px;
line-height: 50px;
background: #0039B8;
font-size: 16px;
text-align: center;
color: #fff;
border-radius: 9px;
border: 0;
}
.submitB.active{
background: #eee;
color: black;
}
.submitB.display{
display: none;
}
</style>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
<meta name="screen-orientation"content="portrait"></meta>
<meta name="x5-orientation"content="portrait"></meta>
<link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/cssReset.css">
<link rel="stylesheet" href="../../css/bts/bootstrap.min.css">
<title>填写意见</title>
</head>
<body>
<div class="tipBox" id="tipBox">
<div class="tipImgBox">
<div class="tipImg">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638784986575829699.png"/>
<h4>&nbsp;&nbsp;&nbsp;提交意见成功!</h4>
</div>
</div>
</div>
<script>
</script>
</body>
<style>
.tipBox{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
/* background: rgba(23,23,23,.5); */
}
.tipImgBox{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.tipImg{
width: 100%;
height: 100%;
background: #fff;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tipImg img{
width: 100px;
border-radius: 100%;
display: block;
/* margin-top:60px; */
}
.tipImg h4{
margin-top: 30px;
}
</style>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment