blog的前端代码
view | history | commit | commitdiff
lijh
2022-01-19 06ee76d0a83854ad7a044689627e0f00a66e5ce5
commit | author | age
06ee76 1 <template>
L 2     <div style="display: flex;" class="link-box">
3         <div v-for="temp in [1,2,1,1,1,1]">
4             <!-- <a href="#" target="_blank" class="no-underline"> -->
5             <a href="#" class="no-underline">
6                 <div class="thumb">
7                     <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG">
8                 </div>
9                 <div class="content">
10                     <p class="title">
11                         长野 の BLOG
12                     </p>
13                 </div>
14             </a>
15         </div>
16     </div>
17 </template>
18
19 <script>
20     export default {}
21 </script>
22
23 </script>
24
25 <style lang="less">
26     .myFriend {
27         a {
28             padding: 10px;
29         }
30     }
31
32     .link-box a {
33         width: 33.75rem;
34         background: #fff;
35         float: left;
36         margin: 0 0 4.375rem;
37         color: #2E2E2E;
38         text-decoration: none;
39         border-bottom: none;
40         border-radius: .25rem;
41         overflow: hidden;
42         -webkit-touch-callout: none;
43         -webkit-user-select: none;
44         -moz-user-select: none;
45         -ms-user-select: none;
46         user-select: none;
47         // -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
48         -webkit-box-shadow: 0 3px.0625rem 0.0625rem #0000001a;
49         -moz-box-shadow: 0 3px 0.0625rem #0000001a;
50         box-shadow: 0 3px 0.0625rem #0000001a;
51         -webkit-transform: translate3d(0, 0, 0);
52         -moz-transform: translate3d(0, 0, 0);
53         -ms-transform: translate3d(0, 0, 0);
54         -o-transform: translate3d(0, 0, 0);
55         transform: translate3d(0, 0, 0);
56         -webkit-transition: .3s;
57         -moz-transition: .3s;
58         -ms-transition: .3s;
59         -o-transition: .3s;
60         transition: .3s;
61     }
62
63     .link-box a:hover:after {
64         left: 0;
65         width: 100%;
66         -webkit-transition: width 350ms;
67         -moz-transition: width 350ms;
68         -ms-transition: width 350ms;
69         -o-transition: width 350ms;
70         transition: width 350ms;
71     }
72
73     .link-box a .thumb {
74         font-size: 0;
75         overflow: hidden;
76         background-color: #fff;
77         margin: 0;
78         border-top-left-radius: .25rem;
79         border-top-right-radius: .25rem;
80     }
81
82     .link-box a .thumb img {
83         width: 100%;
84         height: auto;
85         position: relative;
86         margin: 0;
87         padding: 0;
88         -webkit-transition: .4s;
89         -moz-transition: .4s;
90         -ms-transition: .4s;
91         -o-transition: .4s;
92         transition: .4s;
93     }
94
95     .link-box a .content {
96         text-align: center;
97         background-color: #fff;
98     }
99
100     .link-box a .content .title {
101         text-align: center;
102         padding: 1rem .25rem;
103         font-weight: 500;
104         color: #333;
105         white-space: nowrap;
106         overflow: hidden;
107         text-overflow: ellipsis;
108         margin: 0;
109     }
110
111     .link-box a:hover,
112     .link-box a:active {
113         -webkit-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
114         -moz-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
115         box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
116         -webkit-transform: translateY(-0.25rem);
117         -moz-transform: translateY(-0.25rem);
118         -ms-transform: translateY(-0.25rem);
119         -o-transform: translateY(-0.25rem);
120         transform: translateY(-0.25rem);
121         -moz-transform: none;
122     }
123
124     @media screen and (min-width: 1600px) {
125         .link-box a {
126             margin: 0 0.9375rem 3.75rem;
127             width: -webkit-calc(500% / 5 - 1.875rem);
128             width: calc(500% / 5 - 1.875rem);
129         }
130     }
131
132     @media screen and (max-width: 1599px) and (min-width: 768px) {
133         .link-box a {
134             margin: 0 0.9375rem 3.75rem;
135             width: -webkit-calc(150% / 4 - 1.875rem);
136             width: calc(150% / 4 - 1.875rem);
137         }
138     }
139
140
141
142     @media screen and (max-width: 500px) and (min-width: 319px) {
143         .link-box a {
144             margin: 0 0.75rem 1.5rem;
145             width: -webkit-calc(50% - 1.5rem);
146             width: calc(50% - 1.5rem);
147         }
148     }
149
150     @media screen and (max-width: 767px) and (min-width: 501px) {
151         .link-box a {
152             margin: 0 0.9375rem 3.75rem;
153             width: -webkit-calc(100% / 3 - 1.875rem);
154             width: calc(100% / 3 - 1.875rem);
155         }
156     }
157 </style>