inleft
2022-02-14 83fb3746908461d30e73471e7c7cbbd486e001b8
commit | author | age
06ee76 1 <template>
f9c38e 2     <div class="myFriend">
I 3         <h1>朋友们</h1>
4         <hr>
5         <div class="link-box">
06ee76 6             <!-- <a href="#" target="_blank" class="no-underline"> -->
f9c38e 7             <a href="#" class="no-underline" v-for="temp in [1,2,1,1,1,1,1,1,1]">
06ee76 8                 <div class="thumb">
L 9                     <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG">
10                 </div>
11                 <div class="content">
12                     <p class="title">
13                         长野 の BLOG
14                     </p>
15                 </div>
16             </a>
17         </div>
18     </div>
19 </template>
20
21 <script>
22     export default {}
23 </script>
24
25 </script>
26
27 <style lang="less">
28     .myFriend {
f9c38e 29         box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
I 30         padding: 10px 30px 0px;
31
32         h1 {
33             margin: .67em 0;
34             padding-bottom: .3rem;
35             font-size: 1.8em;
36             line-height: 1.2;
37             position: relative;
38             font-weight: bold;
39         }
40
41         hr {
42             overflow: hidden;
43             margin: 1rem 0;
44             padding: 0;
45             height: .125rem;
46             border: none;
47             background: #bcbfc3 repeating-linear-gradient(-45deg, #fff, #fff 0.25rem, transparent 0.25rem, transparent 0.5rem);
06ee76 48         }
L 49     }
50
f9c38e 51     .link-box {
I 52         padding: 4.375rem 2.1875rem 2.1875rem;
06ee76 53         overflow: hidden;
f9c38e 54         margin: -3.125rem;
I 55         display: flex;
56         flex-direction: row;
57         flex-wrap: wrap;
58
59         a {
60             width: 33.75rem;
61             background: #fff;
62             float: left;
63             margin: 0 0 4.375rem;
64             color: #2E2E2E;
65             text-decoration: none;
66             border-bottom: none;
67             border-radius: .25rem;
68             overflow: hidden;
69             -webkit-touch-callout: none;
70             -webkit-user-select: none;
71             -moz-user-select: none;
72             -ms-user-select: none;
73             user-select: none;
74             // -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
75             -webkit-box-shadow: 0 3px.0625rem 0.0625rem #0000001a;
76             -moz-box-shadow: 0 3px 0.0625rem #0000001a;
77             box-shadow: 0 3px 0.0625rem #0000001a;
78             -webkit-transform: translate3d(0, 0, 0);
79             -moz-transform: translate3d(0, 0, 0);
80             -ms-transform: translate3d(0, 0, 0);
81             -o-transform: translate3d(0, 0, 0);
82             transform: translate3d(0, 0, 0);
83             -webkit-transition: .3s;
84             -moz-transition: .3s;
85             -ms-transition: .3s;
86             -o-transition: .3s;
87             transition: .3s;
88
89             .content {
90                 text-align: center;
91                 background-color: #fff;
92
93                 .title {
94                     text-align: center;
95                     padding: 1rem .25rem;
96                     font-weight: 500;
97                     color: #333;
98                     white-space: nowrap;
99                     overflow: hidden;
100                     text-overflow: ellipsis;
101                     margin: 0;
102                 }
103             }
104         }
105
106         .thumb {
107             font-size: 0;
108             overflow: hidden;
109             background-color: #fff;
110             margin: 0;
111             border-top-left-radius: .25rem;
112             border-top-right-radius: .25rem;
113
114             img {
115                 width: 100%;
116                 height: auto;
117                 position: relative;
118                 margin: 0;
119                 padding: 0;
120                 -webkit-transition: .4s;
121                 -moz-transition: .4s;
122                 -ms-transition: .4s;
123                 -o-transition: .4s;
124                 transition: .4s;
125             }
126         }
06ee76 127     }
L 128
f9c38e 129     // .link-box a:hover:after {
I 130     //     left: 0;
131     //     width: 100%;
132     //     -webkit-transition: width 350ms;
133     //     -moz-transition: width 350ms;
134     //     -ms-transition: width 350ms;
135     //     -o-transition: width 350ms;
136     //     transition: width 350ms;
137     // }
06ee76 138
L 139
140     .link-box a:hover,
141     .link-box a:active {
142         -webkit-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
143         -moz-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
144         box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
145         -webkit-transform: translateY(-0.25rem);
146         -moz-transform: translateY(-0.25rem);
147         -ms-transform: translateY(-0.25rem);
148         -o-transform: translateY(-0.25rem);
149         transform: translateY(-0.25rem);
150         -moz-transform: none;
151     }
152
f9c38e 153     @media screen and (max-width: 710px) and (min-width: 319px) {
I 154         .link-box {
155             padding: 4.375rem 3.125rem 3.125rem;
156             margin: -3.125rem;
157         }
158
159         .myFriend {
160             padding: 10px 15px 0px;
161         }
162     }
163
06ee76 164     @media screen and (min-width: 1600px) {
L 165         .link-box a {
166             margin: 0 0.9375rem 3.75rem;
f9c38e 167             width: -webkit-calc(120% / 5 - 1.875rem);
I 168             width: calc(120% / 5 - 1.875rem);
06ee76 169         }
L 170     }
171
172     @media screen and (max-width: 1599px) and (min-width: 768px) {
173         .link-box a {
174             margin: 0 0.9375rem 3.75rem;
f9c38e 175             width: -webkit-calc(130% / 4 - 1.875rem);
I 176             width: calc(130% / 4 - 1.875rem);
06ee76 177         }
L 178     }
179
180     @media screen and (max-width: 767px) and (min-width: 501px) {
181         .link-box a {
182             margin: 0 0.9375rem 3.75rem;
183             width: -webkit-calc(100% / 3 - 1.875rem);
184             width: calc(100% / 3 - 1.875rem);
185         }
186     }
f9c38e 187
I 188
189     @media screen and (max-width: 500px) and (min-width: 319px) {
190         .link-box a {
191             margin: 0 0.75rem 1.5rem;
192             width: -webkit-calc(50% - 1.5rem);
193             width: calc(50% - 1.5rem);
194         }
195     }
06ee76 196 </style>