.action{ display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; right: 8px; top:-3px; } .time{ width: 30px; height: 10px; color: rgba(0, 0, 0, 0.5); font-size加上发送信息的时间和小红点
时间: 2024-03-29 16:40:50 浏览: 17
这段代码主要是用来设置消息气泡的位置和样式,`.action`类是用来设置消息气泡的整体样式,包括居中、相对定位和向右上方偏移。`.time`类是用来设置消息发送时间的样式,包括字体大小和颜色。这段代码还可能包含其他元素或类,用来实现小红点等功能。但是需要注意的是,这段代码只是样式代码,要实现发送信息的时间和小红点等具体功能还需要在后台代码中进行实现。
相关问题
請你按照上面要求將這段代碼重新修改,左邊為菜單欄,右邊是表格登記<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异常记录</title> <style> .main { display: flex; flex-direction: row; justify-content: space-between; align-items: center; float: right; } .info { display: flex; align-items: center; } .info span { margin-right: 10px; } </style> </head> <body> <div id="menu"> <ul> <li><a href="/">首页</a></li> <li><a href="/index2">登记数据</a></li> <li><a href="/history">查询数据</a></li> </ul> </div> <div id="main"> <h1>异常记录登记</h1> <form method="post" action="/submit"> <label>确认线别:</label> <input type="text" name="line"><br> <label>确认日期:</label> <input type="date" name="date"><br> <label>异常机种:</label> <input type="text" name="model"><br> <label>异常现象:</label> <textarea name="issue"></textarea><br> <label>生产日期:</label> <input type="date" name="prod_date"><br> <label>生产班别:</label> <input type="text" name="shift"><br> <label>生产线别:</label> <input type="text" name="prod_line"><br> <label>责任人:</label> <input type="text" name="responsible"><br> <input type="submit" value="提交"> </form> </div> <div class="info"> <span>欢迎访问</span> <img src="https://example.com/logo.png" alt="logo"> </div> </body> </html>
以下是左边为菜单栏,右边为表格登记的 HTML 和 CSS 代码示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异常记录</title>
<style>
body {
margin: 0;
padding: 0;
}
#menu {
width: 20%;
height: 100vh;
background-color: #f5f5f5;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
margin: 10px 0;
text-align: center;
}
#menu li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
font-weight: bold;
}
#menu li a:hover {
background-color: #333;
color: #fff;
}
#main {
width: 80%;
margin: 50px auto;
padding: 20px;
background-color: #f5f5f5;
}
form {
display: flex;
flex-direction: column;
}
input[type="text"], input[type="date"], textarea {
margin: 10px 0;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
}
input[type="submit"] {
margin-top: 20px;
background-color: #333;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #fff;
color: #333;
border: 1px solid #333;
}
.info {
display: flex;
justify-content: flex-end;
align-items: center;
height: 50px;
background-color: #f5f5f5;
}
.info span {
margin-right: 10px;
}
.info img {
height: 30px;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="/">首页</a></li>
<li><a href="/index2">登记数据</a></li>
<li><a href="/history">查询数据</a></li>
</ul>
</div>
<div id="main">
<h1>异常记录登记</h1>
<form method="post" action="/submit">
<label>确认线别:</label>
<input type="text" name="line">
<label>确认日期:</label>
<input type="date" name="date">
<label>异常机种:</label>
<input type="text" name="model">
<label>异常现象:</label>
<textarea name="issue"></textarea>
<label>生产日期:</label>
<input type="date" name="prod_date">
<label>生产班别:</label>
<input type="text" name="shift">
<label>生产线别:</label>
<input type="text" name="prod_line">
<label>责任人:</label>
<input type="text" name="responsible">
<input type="submit" value="提交">
</form>
</div>
<div class="info">
<span>欢迎访问</span>
<img src="https://example.com/logo.png" alt="logo">
</div>
</body>
</html>
```
菜单栏部分设置了一个宽度为20%的固定宽度,表格登记部分设置了一个宽度为80%的自适应宽度,两者通过 float 属性实现了左右排列,而且通过设置 display 属性和 flex 布局实现了表单的垂直排列。
利用vue3 element-plus写一个美观的添加图片的页面
好的,我可以给你提供一个基本的示例代码,你可以根据自己的需求进行修改和优化。
首先,你需要安装 Vue3 和 Element Plus。可以使用以下命令进行安装:
```
npm install vue@next
npm install element-plus
```
然后,在你的 Vue3 项目中,创建一个组件,名为 `ImageUpload.vue`,代码如下:
```vue
<template>
<div class="image-upload-container">
<el-upload
ref="upload"
class="upload-demo"
action=""
:show-file-list="false"
:on-change="handleChange"
>
<el-button :disabled="uploading">{{ uploading ? '上传中...' : '上传图片' }}</el-button>
</el-upload>
<div v-if="imageUrl" class="image-preview">
<img :src="imageUrl" alt="Preview image" />
</div>
</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "ImageUpload",
setup() {
const imageUrl = ref("");
const uploading = ref(false);
const handleChange = (file) => {
uploading.value = true;
// 这里模拟上传图片的过程
setTimeout(() => {
imageUrl.value = URL.createObjectURL(file.raw);
uploading.value = false;
}, 2000);
};
return {
imageUrl,
uploading,
handleChange,
};
},
};
</script>
<style scoped>
.image-upload-container {
display: flex;
flex-direction: column;
align-items: center;
}
.upload-demo {
margin: 20px 0;
}
.image-preview {
margin-top: 20px;
width: 300px;
height: 300px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.image-preview img {
max-width: 100%;
max-height: 100%;
}
</style>
```
这个组件包含一个 `el-upload` 组件和一个预览图片的 `div` 元素。当用户选择图片后,`handleChange` 方法会被调用,模拟上传图片的过程,并将上传成功后的图片地址保存在 `imageUrl` 变量中。
最后,在你的页面中使用该组件,代码如下:
```vue
<template>
<div class="page-container">
<image-upload />
</div>
</template>
<script>
import ImageUpload from "@/components/ImageUpload.vue";
export default {
name: "AddImagePage",
components: {
ImageUpload,
},
};
</script>
<style scoped>
.page-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
</style>
```
这个页面只包含一个 `ImageUpload` 组件,并使用了 Element Plus 提供的样式。你可以根据你的需求进行自定义样式。