placeholder 属性 <input>标签 HTML 5特有属性

最新推荐文章于 2022-08-06 01:27:04 发布
原创 最新推荐文章于 2022-08-06 01:27:04 发布 · 962 阅读 · 0 ·
CC 4.0 BY-SA版权
你好，如果你感觉文章不错，不如我们一起维护，我在此宣言：文章只会改进绝对不会删除，链接永不失效。大家可以大胆收藏。
文章标签：

#html #标签 #表单 #jsp

部署运行你感兴趣的模型镜像

代码段：

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="用户名" />
<input type="submit" />
</form>

</body>
</html>

效果展示：


附加：

<input type="password" name="password"  placeholder="请输入您的密码" />          //隐藏输入的内容，常用于密码输入框

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

HTML5新增的input元素属性：placeholder、required、autofocus、min、max等
pan_junbiao的博客
07-08 1605
HTML5 大幅度地增加与改良了 input 元素的属性，可以简单地使用这些属性来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。 placeholder 属性：当用户没有输入值时，输入型控件可以通过placeholder 属性向用户显示描述说明或者提示信息。使用placeholder 属性只需要将说明性文字作为该属性的值即可。除了普通的文本输入框，email、number、url 等其他类型的输入框也都支持placeholder 属性。
HTML `＜legend＞` 标签深度解析
2501_93104808的博客
09-19 997
HTML <legend> 标签是表单分组的重要元素，需与 <fieldset> 配合使用。作为 <fieldset> 的第一个子元素，它为表单字段组提供语义化标题，显著提升表单可读性和可访问性。屏幕阅读器会优先朗读 <legend> 内容，为视障用户提供关键上下文信息。该标签支持所有全局属性，但不支持特有属性，浏览器兼容性极佳。最佳实践包括：保持标题简明、避免交互元素、优先使用原生HTML而非ARIA、适当CSS样式化等。通过合理使用 <legend&
HTML的placeholder标签
mll999888的专栏
05-11 1612
HTML 5 placeholder 属性 HTML 5 标签 实例 带有 placeholder 文本的搜索字段： placeholder="Search W3School" /> 亲自试一试 定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息（hint）。 该提示会在输入字段为空时显示，
HTML5特殊属性
CapejasmineY的博客
08-06 234
HTML5页面布局语义化规则、音视频标签属性、html5新增的表单input类型、选项列表、input框验证属性
placeholder属性
酷小亚
09-30 3751
使用placeholder属性来提示输入框中需要输入的内容 效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>placeholder属性</title> </head> <body> <form action="#" method="get"> 请输入邮政编码： <input type="
HTML5的CSS3特有属性
美奇软件开发工作室
03-11 538
1、border-radius: 10px; 调节边框半径，变成圆角边框2、box-shadow:#999 2px 2px 2px; 边框阴影，第1个px参数是x轴，第2px参数是y轴，第3px个参数是偏移量3、text-shadow:#069 2px 2px 2px; 文字阴影...
html 中 <h2>标签的属性
09-24
HTML `<h2>` 标签主要用于定义页面标题的二级标题，其主要作用...如果你是指 `<h2>` 是否支持HTML5新增的一些特性，比如`placeholder`，那是在表单元素如`<input>`上使用的。对于 `<h2>`，它主要是用于结构和显示目的。
Web前端学习笔记第一篇HTML5
babypiglolo的博客
10-06 713
Web前端学习笔记第一篇第一篇 HTML5第1章 HTML5学习概述1.1 认识HTML51.2 学习HTML5前的工作准备1. 头部内容2. 主体内容第二章 HTML5常见的块级标签和行级标签2.1 常见的块级标签2.2 常见的行级标签2.3 HTML5新增结构标签简介第三章 HTML5表格3.1 HTML5表格简介3.2 表格的基本属性3.3 行和列的属性3.4 表格的结构化与直列化3.4.1 表格的结构化3.4.2 表格的直列化3.5 章节案例：完成“特别休假申请单”第四章 HTML5表单4.1 表
HTML5标签与属性全解析：开发必备参考指南
随后，文档按类别详细分类了HTML5中的各类标签，如结构标签（<header>、<footer>、<article>、<section>）、表单相关标签（<input>、<datalist>、<output>）、多媒体标签（<audio>、<video>、<source>）、图形绘制...
解释一下列语句的语法,纯文本输出.<!-- sy1\src\views\orderDetails\index.vue --> <template> <div class="dashboard-container"> <TabChange :order-statics="orderStatics" :default-activity="defaultActivity" @tabChange="change" /> <div class="container" :class="{ hContainer: tableData.length }"> <!-- 搜索项 --> <div class="tableBar"> <label style="margin-right: 10px">订单号：</label> <el-input v-model="input" placeholder="请填写订单号" style="width: 15%" clearable @clear="init(orderStatus)" @keyup.enter.native="initFun(orderStatus)" /> <label style="margin-left: 20px">手机号：</label> <el-input v-model="phone" placeholder="请填写手机号" style="width: 15%" clearable @clear="init(orderStatus)" @keyup.enter.native="initFun(orderStatus)" /> <label style="margin-left: 20px">下单时间：</label> <el-date-picker v-model="valueTime" clearable value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" :default-time="['00:00:00', '23:59:59']" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 25%; margin-left: 10px" @clear="init(orderStatus)" /> <el-button class="normal-btn continue" @click="init(orderStatus, true)"> 查询 </el-button> <el-button type="primary" style="margin-left: 20px; background-color: #ff6b35; border-color: #ff6b35;" @click="debugCreateOrder" > 🐛 调试下单 </el-button> </div> <el-table v-if="tableData.length" :data="tableData" stripe class="tableBox" > <el-table-column key="number" prop="number" label="订单号" /> <el-table-column v-if="[2, 3, 4].includes(orderStatus)" key="orderDishes" prop="orderDishes" label="订单菜品" /> <el-table-column v-if="[0].includes(orderStatus)" key="status" prop="订单状态" label="订单状态" > <template slot-scope="{ row }"> <span>{{ getOrderType(row) }}</span> </template> </el-table-column> <el-table-column v-if="[0, 5, 6].includes(orderStatus)" key="consignee" prop="consignee" label="用户名" show-overflow-tooltip /> <el-table-column v-if="[0, 5, 6].includes(orderStatus)" key="phone" prop="phone" label="手机号" /> <el-table-column v-if="[0, 2, 3, 4, 5, 6].includes(orderStatus)" key="address" prop="address" label="地址" :class-name="orderStatus === 6 ? 'address' : ''" /> <el-table-column v-if="[0, 6].includes(orderStatus)" key="orderTime" prop="orderTime" label="下单时间" class-name="orderTime" min-width="110" /> <el-table-column v-if="[6].includes(orderStatus)" key="cancelTime" prop="cancelTime" class-name="cancelTime" label="取消时间" min-width="110" /> <el-table-column v-if="[6].includes(orderStatus)" key="cancelReason" prop="cancelReason" label="取消原因" class-name="cancelReason" :min-width="[6].includes(orderStatus) ? 80 : 'auto'" /> <el-table-column v-if="[5].includes(orderStatus)" key="deliveryTime" prop="deliveryTime" label="送达时间" /> <el-table-column v-if="[2, 3, 4].includes(orderStatus)" key="estimatedDeliveryTime" prop="estimatedDeliveryTime" label="预计送达时间" min-width="110" /> <el-table-column v-if="[0, 2, 5].includes(orderStatus)" key="amount" prop="amount" label="实收金额" align="center" > <template slot-scope="{ row }"> <span>￥{{ (row.amount.toFixed(2) * 100) / 100 }}</span> </template> </el-table-column> <el-table-column v-if="[2, 3, 4, 5].includes(orderStatus)" key="remark" prop="remark" label="备注" align="center" /> <el-table-column v-if="[2, 3, 4].includes(orderStatus)" key="tablewareNumber" prop="tablewareNumber" label="餐具数量" align="center" min-width="80" /> <el-table-column prop="btn" label="操作" align="center" :class-name="orderStatus === 0 ? 'operate' : 'otherOperate'" :min-width=" [2, 3, 4].includes(orderStatus) ? 130 : [0].includes(orderStatus) ? 140 : 'auto' " > <template slot-scope="{ row }"> <!-- <el-divider direction="vertical" /> --> <div class="before"> <el-button v-if="row.status === 2" type="text" class="blueBug" @click="orderAccept(row), (isTableOperateBtn = true)" > 接单 </el-button> <el-button v-if="row.status === 3" type="text" class="blueBug" @click="cancelOrDeliveryOrComplete(3, row.id)" > 派送 </el-button> <el-button v-if="row.status === 4" type="text" class="blueBug" @click="cancelOrDeliveryOrComplete(4, row.id)" > 完成 </el-button> </div> <div class="middle"> <el-button v-if="row.status === 2" type="text" class="delBut" @click="orderReject(row), (isTableOperateBtn = true)" > 拒单 </el-button> <el-button v-if="[1, 3, 4, 5].includes(row.status)" type="text" class="delBut" @click="cancelOrder(row)" > 取消 </el-button> </div> <div class="after"> <el-button type="text" class="blueBug non" @click="goDetail(row.id, row.status, row)" > 查看 </el-button> </div> </template> </el-table-column> </el-table> <Empty v-else :is-search="isSearch" /> <el-pagination v-if="counts > 10" class="pageList" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="counts" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> <!-- 查看弹框部分 --> <el-dialog title="订单信息" :visible.sync="dialogVisible" width="53%" :before-close="handleClose" class="order-dialog" > <el-scrollbar style="height: 100%"> <div class="order-top"> <div> <div style="display: inline-block"> <label style="font-size: 16px">订单号：</label> <div class="order-num"> {{ diaForm.number }} </div> </div> <div style="display: inline-block" class="order-status" :class="{ status3: [3, 4].includes(dialogOrderStatus) }" > {{ orderList.filter((item) => item.value === dialogOrderStatus)[0] .label }} </div> </div> <p><label>下单时间：</label>{{ diaForm.orderTime }}</p> </div> <div class="order-middle"> <div class="user-info"> <div class="user-info-box"> <div class="user-name"> <label>用户名：</label> <span>{{ diaForm.consignee }}</span> </div> <div class="user-phone"> <label>手机号：</label> <span>{{ diaForm.phone }}</span> </div> <div v-if="[2, 3, 4, 5].includes(dialogOrderStatus)" class="user-getTime" > <label>{{ dialogOrderStatus === 5 ? '送达时间：' : '预计送达时间：' }}</label> <span>{{ dialogOrderStatus === 5 ? diaForm.deliveryTime : diaForm.estimatedDeliveryTime }}</span> </div> <div class="user-address"> <label>地址：</label> <span>{{ diaForm.address }}</span> </div> </div> <div class="user-remark" :class="{ orderCancel: dialogOrderStatus === 6 }" > <div>{{ dialogOrderStatus === 6 ? '取消原因' : '备注' }}</div> <span>{{ dialogOrderStatus === 6 ? diaForm.cancelReason || diaForm.rejectionReason : diaForm.remark }}</span> </div> </div> <div class="dish-info"> <div class="dish-label"> 菜品 </div> <div class="dish-list"> <div v-for="(item, index) in diaForm.orderDetailList" :key="index" class="dish-item" > <div class="dish-item-box"> <span class="dish-name">{{ item.name }}</span> <span class="dish-num">x{{ item.number }}</span> </div> <span class="dish-price">￥{{ item.amount ? item.amount.toFixed(2) : '' }}</span> </div> </div> <div class="dish-all-amount"> <label>菜品小计</label> <span>￥{{ (diaForm.amount - 6 - diaForm.packAmount).toFixed(2) }}</span> </div> </div> </div> <div class="order-bottom"> <div class="amount-info"> <div class="amount-label"> 费用 </div> <div class="amount-list"> <div class="dish-amount"> <span class="amount-name">菜品小计：</span> <span class="amount-price">￥{{ ((diaForm.amount - 6 - diaForm.packAmount).toFixed(2) * 100) / 100 }}</span> </div> <div class="send-amount"> <span class="amount-name">派送费：</span> <span class="amount-price">￥{{ 6 }}</span> </div> <div class="package-amount"> <span class="amount-name">打包费：</span> <span class="amount-price">￥{{ diaForm.packAmount ? (diaForm.packAmount.toFixed(2) * 100) / 100 : '' }}</span> </div> <div class="all-amount"> <span class="amount-name">合计：</span> <span class="amount-price">￥{{ diaForm.amount ? (diaForm.amount.toFixed(2) * 100) / 100 : '' }}</span> </div> <div class="pay-type"> <span class="pay-name">支付渠道：</span> <span class="pay-value">{{ diaForm.payMethod === 1 ? '微信支付' : '支付宝支付' }}</span> </div> <div class="pay-time"> <span class="pay-name">支付时间：</span> <span class="pay-value">{{ diaForm.checkoutTime }}</span> </div> </div> </div> </div> </el-scrollbar> <span v-if="dialogOrderStatus !== 6" slot="footer" class="dialog-footer"> <el-checkbox v-if="dialogOrderStatus === 2 && orderStatus === 2" v-model="isAutoNext" >处理完自动跳转下一条</el-checkbox> <el-button v-if="dialogOrderStatus === 2" @click="orderReject(row), (isTableOperateBtn = false)" >拒 单</el-button> <el-button v-if="dialogOrderStatus === 2" type="primary" @click="orderAccept(row), (isTableOperateBtn = false)" >接 单</el-button> <el-button v-if="[1, 3, 4, 5].includes(dialogOrderStatus)" @click="dialogVisible = false" >返 回</el-button> <el-button v-if="dialogOrderStatus === 3" type="primary" @click="cancelOrDeliveryOrComplete(3, row.id)" >派 送</el-button> <el-button v-if="dialogOrderStatus === 4" type="primary" @click="cancelOrDeliveryOrComplete(4, row.id)" >完 成</el-button> <el-button v-if="[1].includes(dialogOrderStatus)" type="primary" @click="cancelOrder(row)" >取消订单</el-button> </span> </el-dialog> <!-- 拒单，取消弹窗 --> <el-dialog :title="cancelDialogTitle + '原因'" :visible.sync="cancelDialogVisible" width="42%" :before-close="() => ((cancelDialogVisible = false), (cancelReason = ''))" class="cancelDialog" > <el-form label-width="90px"> <el-form-item :label="cancelDialogTitle + '原因：'"> <el-select v-model="cancelReason" :placeholder="'请选择' + cancelDialogTitle + '原因'" > <el-option v-for="(item, index) in cancelDialogTitle === '取消' ? cancelrReasonList : cancelOrderReasonList" :key="index" :label="item.label" :value="item.label" /> </el-select> </el-form-item> <el-form-item v-if="cancelReason === '自定义原因'" label="原因："> <el-input v-model.trim="remark" type="textarea" :placeholder="'请填写您' + cancelDialogTitle + '的原因（限20字内）'" maxlength="20" /> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click=";(cancelDialogVisible = false), (cancelReason = '')">取 消</el-button> <el-button type="primary" @click="confirmCancel">确 定</el-button> </span> </el-dialog> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' import HeadLable from '@/components/HeadLable/index.vue' import InputAutoComplete from '@/components/InputAutoComplete/index.vue' import TabChange from './tabChange.vue' import Empty from '@/components/Empty/index.vue' import { getOrderDetailPage, queryOrderDetailById, completeOrder, deliveryOrder, orderCancel, orderReject, orderAccept, getOrderListBy, } from '@/api/order' @Component({ components: { HeadLable, InputAutoComplete, TabChange, Empty, }, }) export default class extends Vue { private defaultActivity: any = 0 private orderStatics = {} private row = {} private isAutoNext = true private isTableOperateBtn = true private currentPageIndex = 0 //记录查看详情数据的index private orderId = '' //订单号 private input = '' //搜索条件的订单号 private phone = '' //搜索条件的手机号 private valueTime = [] private dialogVisible = false //详情弹窗 private cancelDialogVisible = false //取消，拒单弹窗 private cancelDialogTitle = '' //取消，拒绝弹窗标题 private cancelReason = '' private remark = '' //自定义原因 private counts: number = 0 private page: number = 1 private pageSize: number = 10 private tableData = [] private diaForm = [] private isSearch: boolean = false private orderStatus = 0 //列表字段展示所需订单状态,用于分页请求数据 private dialogOrderStatus = 0 //弹窗所需订单状态，用于详情展示字段 private cancelOrderReasonList = [ { value: 1, label: '订单量较多，暂时无法接单', }, { value: 2, label: '菜品已销售完，暂时无法接单', }, { value: 3, label: '餐厅已打烊，暂时无法接单', }, { value: 0, label: '自定义原因', }, ] private cancelrReasonList = [ { value: 1, label: '订单量较多，暂时无法接单', }, { value: 2, label: '菜品已销售完，暂时无法接单', }, { value: 3, label: '骑手不足无法配送', }, { value: 4, label: '客户电话取消', }, { value: 0, label: '自定义原因', }, ] private orderList = [ { label: '全部订单', value: 0, }, { label: '待付款', value: 1, }, { label: '待接单', value: 2, }, { label: '待派送', value: 3, }, { label: '派送中', value: 4, }, { label: '已完成', value: 5, }, { label: '已取消', value: 6, }, ] created() { this.init(Number(this.$route.query.status) || 0) } mounted() { //如果有值说明是消息通知点击进来的 if ( this.$route.query.orderId && this.$route.query.orderId !== 'undefined' ) { this.goDetail(this.$route.query.orderId, 2) } if (this.$route.query.status) { this.defaultActivity = this.$route.query.status } // console.log(this.$route.query, 'this.$route') } initFun(orderStatus) { this.page = 1 this.init(orderStatus) } change(activeIndex) { if (activeIndex === this.orderStatus) return this.init(activeIndex) this.input = '' this.phone = '' this.valueTime = [] this.dialogOrderStatus = 0 this.$router.push('/order') console.log(activeIndex, '接收到了子组件的index') } //获取待处理，待派送，派送中数量 getOrderListBy3Status() { getOrderListBy({}) .then((res) => { if (res.data.code === 1) { this.orderStatics = res.data.data } else { this.$message.error(res.data.msg) } }) .catch((err) => { this.$message.error('请求出错了：' + err.message) }) } init(activeIndex: number = 0, isSearch?) { this.isSearch = isSearch const params = { page: this.page, pageSize: this.pageSize, number: this.input || undefined, phone: this.phone || undefined, beginTime: this.valueTime && this.valueTime.length > 0 ? this.valueTime[0] : undefined, endTime: this.valueTime && this.valueTime.length > 0 ? this.valueTime[1] : undefined, status: activeIndex || undefined, } getOrderDetailPage({ ...params }) .then((res) => { if (res.data.code === 1) { this.tableData = res.data.data.records this.orderStatus = activeIndex this.counts = Number(res.data.data.total) this.getOrderListBy3Status() if ( this.dialogOrderStatus === 2 && this.orderStatus === 2 && this.isAutoNext && !this.isTableOperateBtn && res.data.data.records.length > 1 ) { const row = res.data.data.records[0] this.goDetail(row.id, row.status, row) } else { return null } } else { this.$message.error(res.data.msg) } }) .catch((err) => { this.$message.error('请求出错了：' + err.message) }) } getOrderType(row: any) { if (row.status === 1) { return '待付款' } else if (row.status === 2) { return '待接单' } else if (row.status === 3) { return '待派送' } else if (row.status === 4) { return '派送中' } else if (row.status === 5) { return '已完成' } else if (row.status === 6) { return '已取消' } else { return '退款' } } // 查看详情 async goDetail(id: any, status: number, row?: any) { // console.log(111, index, row) this.diaForm = [] this.dialogVisible = true this.dialogOrderStatus = status this.orderId = id const { data } = await queryOrderDetailById({ orderId: id }) this.diaForm = data.data this.row = row || { id: this.$route.query.orderId, status: status } if (this.$route.query.orderId) { this.$router.push('/order') } } //打开拒单弹窗 orderReject(row: any) { this.cancelDialogVisible = true this.orderId = row.id this.dialogOrderStatus = row.status this.cancelDialogTitle = '拒绝' this.dialogVisible = false this.cancelReason = '' } //接单 orderAccept(row: any) { this.orderId = row.id this.dialogOrderStatus = row.status orderAccept({ id: this.orderId }) .then((res) => { if (res.data.code === 1) { this.$message.success('操作成功') this.orderId = '' // this.dialogOrderStatus = 0 this.dialogVisible = false this.init(this.orderStatus) } else { this.$message.error(res.data.msg) } }) .catch((err) => { this.$message.error('请求出错了：' + err.message) }) } //打开取消订单弹窗 cancelOrder(row: any) { this.cancelDialogVisible = true this.orderId = row.id this.dialogOrderStatus = row.status this.cancelDialogTitle = '取消' this.dialogVisible = false this.cancelReason = '' } //确认取消或拒绝订单并填写原因 confirmCancel(type) { if (!this.cancelReason) { return this.$message.error(`请选择${this.cancelDialogTitle}原因`) } else if (this.cancelReason === '自定义原因' && !this.remark) { return this.$message.error(`请输入${this.cancelDialogTitle}原因`) } (this.cancelDialogTitle === '取消' ? orderCancel : orderReject)({ id: this.orderId, // eslint-disable-next-line standard/computed-property-even-spacing [this.cancelDialogTitle === '取消' ? 'cancelReason' : 'rejectionReason']: this.cancelReason === '自定义原因' ? this.remark : this.cancelReason, }) .then((res) => { if (res.data.code === 1) { this.$message.success('操作成功') this.cancelDialogVisible = false this.orderId = '' // this.dialogOrderStatus = 0 this.init(this.orderStatus) } else { this.$message.error(res.data.msg) } }) .catch((err) => { this.$message.error('请求出错了：' + err.message) }) } // 派送，完成 cancelOrDeliveryOrComplete(status: number, id: string) { const params = { status, id, } ;(status === 3 ? deliveryOrder : completeOrder)(params) .then((res) => { if (res.data.code === 1) { this.$message.success('操作成功') this.orderId = '' // this.dialogOrderStatus = 0 this.dialogVisible = false this.init(this.orderStatus) } else { this.$message.error(res.data.msg) } }) .catch((err) => { this.$message.error('请求出错了：' + err.message) }) } handleClose() { this.dialogVisible = false } // 调试下单功能 debugCreateOrder() { const debugOrderData = { addressBook: { id: 1, userId: 1, consignee: '测试用户', phone: '13800138000', sex: '1', provinceCode: '110000', provinceName: '北京市', cityCode: '110100', cityName: '北京市', districtCode: '110101', districtName: '东城区', detail: '测试地址详情', label: '公司', isDefault: 1 }, amount: 88.00, estimatedDeliveryTime: new Date(Date.now() + 30 * 60 * 1000).toISOString().slice(0, 19).replace('T', ' '), payMethod: 1, remark: '这是一个调试测试订单', shoppingCartList: [ { name: '测试菜品', image: 'https://via.placeholder.com/150', dishId: 1, setmealId: null, dishFlavor: '不辣', number: 2, amount: 44.00 } ], tablewareNumber: 1, tablewareStatus: 1 } // 模拟API调用创建订单 const loading = this.$loading({ lock: true, text: '正在创建调试订单...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }) // 模拟异步请求 setTimeout(() => { loading.close() this.$message.success('调试订单创建成功！订单号: DEBUG' + Date.now()) // 刷新订单列表 this.init(this.orderStatus) }, 1500) } private handleSizeChange(val: any) { this.pageSize = val this.init(this.orderStatus) } private handleCurrentChange(val: any) { this.page = val this.init(this.orderStatus) } } </script> <style lang="scss" scoped> .dashboard { &-container { margin: 30px; // height: 100%; min-height: 700px; .container { background: #fff; position: relative; z-index: 1; padding: 30px 28px; border-radius: 4px; // min-height: 650px; height: calc(100% - 55px); .tableBar { // display: flex; margin-bottom: 20px; justify-content: space-between; .tableLab { span { cursor: pointer; display: inline-block; font-size: 14px; padding: 0 20px; color: $gray-2; border-right: solid 1px $gray-4; } } } .tableBox { width: 100%; border: 1px solid $gray-5; border-bottom: 0; } .pageList { text-align: center; margin-top: 30px; } //查询黑色按钮样式 .normal-btn { background: #333333; color: white; margin-left: 20px; } } .hContainer { height: auto !important; } } } .search-btn { margin-left: 20px; } .info-box { margin: -15px -44px 20px; p { display: flex; height: 20px; line-height: 20px; font-size: 14px; font-weight: 400; color: #666666; text-align: left; margin-bottom: 14px; &:last-child { margin-bottom: 0; } label { width: 100px; display: inline-block; color: #666; } .des { flex: 1; color: #333333; } } } .order-top { // height: 80px; border-bottom: 1px solid #e7e6e6; padding-bottom: 26px; padding-left: 22px; padding-right: 22px; // margin: 0 30px; display: flex; justify-content: space-between; align-items: center; .order-status { width: 57.25px; height: 27px; background: #333333; border-radius: 13.5px; color: white; margin-left: 19px; text-align: center; line-height: 27px; } .status3 { background: #f56c6c; } p { color: #333; label { color: #666; } } .order-num { font-size: 16px; color: #2a2929; font-weight: bold; display: inline-block; } } .order-middle { .user-info { min-height: 140px; background: #fbfbfa; margin-top: 23px; padding: 20px 43px; color: #333; .user-info-box { min-height: 55px; display: flex; flex-wrap: wrap; .user-name { flex: 67%; } .user-phone { flex: 33%; } .user-getTime { margin-top: 14px; flex: 80%; label { margin-right: 3px; } } label { margin-right: 17px; color: #666; } .user-address { margin-top: 14px; flex: 80%; label { margin-right: 30px; } } } .user-remark { min-height: 43px; line-height: 43px; background: #fffbf0; border: 1px solid #fbe396; border-radius: 4px; margin-top: 10px; padding: 6px; display: flex; align-items: center; div { display: inline-block; min-width: 53px; height: 32px; background: #fbe396; border-radius: 4px; text-align: center; line-height: 32px; color: #333; margin-right: 30px; // padding: 12px 6px; } span { color: #f2a402; line-height: 1.15; } } .orderCancel { background: #ffffff; border: 1px solid #b6b6b6; div { padding: 0 10px; background-color: #e5e4e4; } span { color: #f56c6c; } } } .dish-info { // min-height: 180px; display: flex; flex-wrap: wrap; padding: 20px 40px; border-bottom: 1px solid #e7e6e6; .dish-label { color: #666; } .dish-list { flex: 80%; display: flex; flex-wrap: wrap; .dish-item { flex: 50%; margin-bottom: 14px; color: #333; .dish-num { } .dish-item-box { display: inline-block; width: 120px; } } } .dish-label { margin-right: 65px; } .dish-all-amount { flex: 1; padding-left: 92px; margin-top: 10px; label { color: #333333; font-weight: bold; margin-right: 5px; } span { color: #f56c6c; } } } } .order-bottom { .amount-info { // min-height: 180px; display: flex; flex-wrap: wrap; padding: 20px 40px; padding-bottom: 0px; .amount-label { color: #666; margin-right: 65px; } .amount-list { flex: 80%; display: flex; flex-wrap: wrap; color: #333; // height: 65px; .dish-amount, .package-amount, .pay-type { display: inline-block; width: 300px; margin-bottom: 14px; flex: 50%; } .send-amount, .all-amount, .pay-time { display: inline-block; flex: 50%; padding-left: 10%; } .package-amount { .amount-name { margin-right: 14px; } } .all-amount { .amount-name { margin-right: 24px; } .amount-price { color: #f56c6c; } } .send-amount { .amount-name { margin-right: 10px; } } } } } </style> <style lang="scss"> .dashboard-container { .cancelReason { padding-left: 40px; } .cancelTime { padding-left: 50px; } .orderTime { padding-left: 50px; } td.operate .cell { .before, .middle, .after { height: 39px; width: 48px; } } td.operate .cell, td.otherOperate .cell { display: flex; flex-wrap: nowrap; justify-content: center; } .order-dialog { .el-dialog { max-height: 764px !important; display: flex; flex-direction: column; margin: 0 !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: calc(100% - 30px); max-width: calc(100% - 30px); } .el-dialog__body { height: 520px !important; } } } .el-dialog__body { padding-top: 34px; padding-left: 30px; padding-right: 30px; } .cancelDialog { .el-dialog__body { padding-left: 64px; } .el-select, .el-textarea { width: 293px; } .el-textarea textarea { height: 114px; } } .el-dialog__footer { .el-checkbox { float: left; margin-left: 40px; } .el-checkbox__label { color: #333333 !important; } } .empty-box { display: flex; align-items: center; justify-content: center; img { margin-top: 0 !important; } } </style>
最新发布
10-28
- 使用 Element UI 的 `<el-input>` 组件，双向绑定 `v-model="input"`。 - `clearable` 允许清空输入框。 - `@clear`：清空时重新加载数据。 - `@keyup.enter.native`：回车键触发搜索（`.native` 表示监听原生...
HTML中的特殊属性
狐青山的博客
03-28 297
触发关闭当前页面脚本： onclick="javaScript:parent.tab.close(parent.tab.present(), '');" input 中的触发事件：onclick="getCompanyName()" 调用触发方法，弹出一个框 function getCompanyName(){ parent.u.dialog({ title: ""...
PlaceHolder到底什么
weixin_30307267的博客
07-15 938
PlaceHolder是一个占位控件，可以在里面添加子控件。 一．ContentPlaceHolder、Content又是什么呢？ 这二者是用于母版技术的。 ContentPlaceHolder用在母版页中，表示这里面的内容可以被aspx页中的Content内容替换，当然aspx页也可以不理会它。 Content就是用于aspx页的，...
HTML中placeholder 属性
热门推荐
秦哥的博客
03-07 1万+
零、码仙励志 不积跬步，无以至千里；不积小流，无以成江海。 一、placeholder 属性的用法 placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。 该提示会在用户输入值之前显示在输入字段中。 注意：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 passwo...
Sencha toucha2中设置文本框默认提示文字的PlaceHolder属性的颜色
weixin_34050389的博客
09-06 128
在做项目时，我想让一个文本框的提示文字变色，显得更醒目。但是默认的PlaceHolder颜色是灰色的。经过多次尝试和查资料，终于搞懂了。只需要一个CSS样式就可以了。 HTML5对Web Form做了许多增强，比如input新增的type类型、Form Validation等。Placeholder是HTML5新增的另一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字...
placeholder属性使用
若先设计
07-26 3252
placeholder属性是H5专用的，实现的效果就是字体颜色浅、粗等特征，如在，而如果在中使用，则也是可以的，直接的，同样实现相同的效果。
HTML标签特殊属性
PKWind的专栏
07-02 999
1、标签： 性别： 男 女 上述代码实现了点击label选中单选框，要求for属性对应radio的id。此功能也可以应用与checkbox。 label默认没有属性，但是可以设置CSS宽度、CSS高度、CSS边框等。
html5--placeholder属性
liuhuabing760596103的专栏
10-18 605
html5--placeholder属性
HTML5新增属性（一）
暖心~的博客
04-10 727
表单内元素的form属性在HTML5中，可以把表单内的从属元素写在页面的任何地方，然后为元素指定一个form属性。<form id="testform"> <input type="text"> </form> <textarea form="testform"></textarea>表单内元素的formaction属性（1）在HTML4中，一个表单内的所有元素只能通过表单的action属性
HTML5 的placeholder属性（兼容各版本）
Web前端开发经验记录
07-01 1336
Placeholder是HTML5新增的另一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值