first commit

历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/css/iconfont.css

@@ -0,0 +1,71 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3445167 */
+  src: url('iconfont.woff2?t=1655693871496') format('woff2'),
+       url('iconfont.woff?t=1655693871496') format('woff'),
+       url('iconfont.ttf?t=1655693871496') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-close:before {
+  content: "\e6a7";
+}
+
+.icon-yulanxuanzhuan:before {
+  content: "\e627";
+}
+
+.icon-quanping:before {
+  content: "\e626";
+}
+
+.icon-suoxiao:before {
+  content: "\ec13";
+}
+
+.icon-fangda:before {
+  content: "\ec14";
+}
+
+.icon-beijingyibiyi:before {
+  content: "\e64f";
+}
+
+.icon-fanhui:before {
+  content: "\e601";
+}
+
+.icon-yunshangchuan:before {
+  content: "\e600";
+}
+
+.icon-xiazai:before {
+  content: "\e668";
+}
+
+.icon-sousuo:before {
+  content: "\e752";
+}
+
+.icon-z044:before {
+  content: "\e630";
+}
+
+.icon-jiahao:before {
+  content: "\eaf3";
+}
+
+.icon-gengduo:before {
+  content: "\e620";
+}
+
+.icon-shuaxin:before {
+  content: "\e631";
+}
+

历届学生/font-end-nine/项目练习/上课项目/js案例/图片预览/css/preview.css

@@ -0,0 +1,83 @@
+.preview {
+    position: fixed;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.preview_task {
+    width: 100%;
+    height: 100%;
+    background: #0000008a;
+    position: absolute;
+    z-index: -1;
+}
+.preview_wrap {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.preview_img {
+    height: 100%;
+    position: relative;
+    z-index: 10;
+}
+
+.preview_close {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    color: #fff;
+    z-index: 9;
+    font-size: 28px;
+}
+
+
+.navigation {
+    position: absolute;
+    z-index: 9;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #fff;
+    font-size: 27px;
+    background: #939090;
+    width: 44px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100%;
+}
+.navigation_left {
+    left: 10px;
+}
+.navigation_right {
+    right: 10px;
+}
+
+.preview_list {
+    width: 282px;
+    height: 44px;
+    position: absolute;
+    z-index: 11;
+    left: 50%;
+    bottom: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transform: translateX(-50%);
+    padding: 0 23px;
+    background-color: #606266;
+    box-sizing: border-box;
+    border-radius: 22px;
+    color: #fff
+}
+.preview_list .preview_list_item {
+    cursor: pointer;
+}
+.preview_list .right {
+    transform: rotateY(180deg);
+}