|
@@ -0,0 +1,149 @@
|
|
|
|
|
+@using AI.Platform.Page.Pages.Media.Model
|
|
|
|
|
+@using System.Threading.Tasks
|
|
|
|
|
+@using System.Text.Json
|
|
|
|
|
+
|
|
|
|
|
+@if (IsVisible)
|
|
|
|
|
+{
|
|
|
|
|
+ <div class="modal-overlay">
|
|
|
|
|
+ <div class="modal-content filter_box">
|
|
|
|
|
+ <div class="screen_box">
|
|
|
|
|
+ @if(Media.Type == MediaType.VIDEO)
|
|
|
|
|
+ {
|
|
|
|
|
+ <video class="video_box" src="@(Utils.ToWebPath(Media.Path))" autoplay></video>
|
|
|
|
|
+ } else
|
|
|
|
|
+ {
|
|
|
|
|
+ <div class="video_tip">视频区</div>
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ @if (Media.Type == MediaType.IMAGE)
|
|
|
|
|
+ {
|
|
|
|
|
+ <img class="image_box" src="@(Utils.ToWebPath(Media.Path))" />
|
|
|
|
|
+ }
|
|
|
|
|
+ else
|
|
|
|
|
+ {
|
|
|
|
|
+ <div class="image_tip">图片区</div>
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ <div class="nozzle_box">
|
|
|
|
|
+ <img src="@(Utils.ToWebPath("wwwroot\\images\\backgroud\\nozzle.png"))" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ <div class="filter_row" style="justify-content:end;margin-top:5%;">
|
|
|
|
|
+ <Button Icon="plus" OnClick="onSure" Style="margin-right:2%">确定</Button>
|
|
|
|
|
+ <Button Icon="reload" OnClick="Close" Style="margin-right:2%">取消</Button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+<style>
|
|
|
|
|
+ /* 遮罩层:全屏、半透明 */
|
|
|
|
|
+ .modal-overlay {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ width: 100vw;
|
|
|
|
|
+ height: 100vh;
|
|
|
|
|
+ background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ z-index: 1000;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 弹窗内容:白色卡片,居中由父容器控制 */
|
|
|
|
|
+ .modal-content {
|
|
|
|
|
+ background: white;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ width: 80%;
|
|
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
|
|
|
+ /* 注意:不要设 height: 100vh,否则会拉满全屏 */
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .filter_box {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ background: #ffffff;
|
|
|
|
|
+ padding: 2%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .filter_row {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: row;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ margin-top: 2%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .screen_box{
|
|
|
|
|
+ width:30%;
|
|
|
|
|
+ height:80vh;
|
|
|
|
|
+ background: #2e2e2e;
|
|
|
|
|
+ display:flex;
|
|
|
|
|
+ flex-direction:column;
|
|
|
|
|
+ align-items:center;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .video_box{
|
|
|
|
|
+ width:90%;
|
|
|
|
|
+ height:30%;
|
|
|
|
|
+ display:flex;
|
|
|
|
|
+ justify-content:center;
|
|
|
|
|
+ align-items:center;
|
|
|
|
|
+ margin-top:1%;
|
|
|
|
|
+ }
|
|
|
|
|
+ .video_tip{
|
|
|
|
|
+ width: 90%;
|
|
|
|
|
+ height: 30%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-top: 1%;
|
|
|
|
|
+ border: solid 1px #FFFFFF;
|
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .image_box{
|
|
|
|
|
+ width: 90%;
|
|
|
|
|
+ height: 30%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-top: 1%;
|
|
|
|
|
+ }
|
|
|
|
|
+ .image_tip {
|
|
|
|
|
+ width: 90%;
|
|
|
|
|
+ height: 30%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-top: 1%;
|
|
|
|
|
+ border: solid 1px #FFFFFF;
|
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .nozzle_box {
|
|
|
|
|
+ width: 90%;
|
|
|
|
|
+ height: 50%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-top: 1%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .media-container img {
|
|
|
|
|
+
|
|
|
|
|
+ width: 50%;
|
|
|
|
|
+ height: 50%;
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|