MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #73 from AllisonZw/master

Browse Source 
fix: 修复图标展示
This commit is contained in:
Zyronon 2024-04-30 16:58:49 +08:00 committed by GitHub
commit 1128b7822d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 71 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -56,6 +56,7 @@ Github Pages: [https://dy.ttentau.top/](https://dy.ttentau.top/)
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin)
### 本地开发 ### 本地开发
**注意：必须 git 命令 clone 下来才能运行，下载 zip 包是无法运行的。如果 clone 速度太慢，推荐使用 gitee 地址**
```bash ```bash
git clone https://gitee.com/zyronon/douyin.git (中国使用) git clone https://gitee.com/zyronon/douyin.git (中国使用)

26
docs/README.de.md
View File

@ -21,25 +21,22 @@
<img width="150px" src='imgs/3.gif' /> <img width="150px" src='imgs/3.gif' />
<img width="150px" src='imgs/4.gif' /> <img width="150px" src='imgs/4.gif' />
<img width="150px" src='imgs/5.gif' /> <img width="150px" src='imgs/5.gif' />
<img width="150px" src='imgs/img-1.jpg' />
<img width="150px" src='imgs/img-2.jpg' />
<img width="150px" src='imgs/img-3.jpg' />
<img width="150px" src='imgs/img-4.jpg' />
<img width="150px" src='imgs/img-5.jpg' />
</div> </div>
## Online-Zugang ## Online-Zugang
Gitee-Seiten:<https://dy.ttentau.top/>(Es wird empfohlen, diese Adresse in China zu besuchen) Gitee-Seiten:<https://zyronon.gitee.io/douyin/>(Es wird empfohlen, diese Adresse in China zu besuchen)
Netlify:<https://douyins.netlify.app/> Hinweis: Gitee-Seiten können derzeit nicht aktualisiert werden, da der Code nicht aktuell ist. Wenn Sie die Firewall umgehen können, empfehle ich den Besuch der folgenden Adresse:
[//]: # "Vercel: [https://douyins.vercel.app](https://douyins.vercel.app)" Github-Seiten:<https://dy.ttentau.top/>
[//]: # "Gitee pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/) (中国地区推荐访问这个地址) " [//]: # "Gitee pages: [https://dy.ttentau.top/](https://dy.ttentau.top/) (中国地区推荐访问这个地址) "
[//]: # "Github pages: [https://zyronon.github.io/douyin/](https://zyronon.github.io/douyin/) " [//]: # "Github pages: [https://zyronon.github.io/douyin/](https://zyronon.github.io/douyin/) "
[//]: # "Vercel和Netlify分别送的100G免费流量已经用完了...🤣" [//]: # "Netlify: [https://douyins.netlify.app/](https://douyins.netlify.app/)"
[//]: # "Vercel: [https://douyins.vercel.app](https://douyins.vercel.app)"
[//]: # "Android Apk: https://github.com/zyronon/douyin/releases" [//]: # "Android Apk: https://github.com/zyronon/douyin/releases"
@ -49,8 +46,10 @@ Netlify:<https://douyins.netlify.app/>
## Verknüpfung ## Verknüpfung
\[douyin-vue] Eins:[200 Codezeilen zur Implementierung einer Karussellkomponente ähnlich Swiper.js](https://juejin.cn/post/7360512664317018146) \[Imitation Douyin-Serie] 1:[200 Codezeilen zur Implementierung einer Karussellkomponente ähnlich Swiper.js](https://juejin.cn/post/7360512664317018146)
\[douyin-vue] Zweitens:[Verwirklichen Sie den „unendlich gleitenden Video“-Effekt auf Douyin](https://juejin.cn/post/7361614921519054883) \[Imitation Douyin-Serie] 2:[Verwirklichen Sie den „unendlich gleitenden Video“-Effekt auf Douyin](https://juejin.cn/post/7361614921519054883)
\[Imitation Douyin-Serie] Drei:[Einführung in die Verwendung von Vue-Routing und das Hinzufügen von Übergangsanimationen](https://juejin.cn/post/7362528152777130025)
Weitere Artikel sind in Vorbereitung... Weitere Artikel sind in Vorbereitung...
## laufen ## laufen
@ -64,7 +63,8 @@ Hinweis: Dieses Projekt ist nur für Studien- und Forschungszwecke geeignet, nic
### lokale Entwicklung ### lokale Entwicklung
```bash ```bash
git clone https://github.com/zyronon/douyin.git git clone https://gitee.com/zyronon/douyin.git (中国使用)
https://github.com/zyronon/douyin.git
cd douyin cd douyin
npm install npm install
npm run dev npm run dev

28
docs/README.en.md
View File

@ -21,25 +21,22 @@
<img width="150px" src='imgs/3.gif' /> <img width="150px" src='imgs/3.gif' />
<img width="150px" src='imgs/4.gif' /> <img width="150px" src='imgs/4.gif' />
<img width="150px" src='imgs/5.gif' /> <img width="150px" src='imgs/5.gif' />
<img width="150px" src='imgs/img-1.jpg' />
<img width="150px" src='imgs/img-2.jpg' />
<img width="150px" src='imgs/img-3.jpg' />
<img width="150px" src='imgs/img-4.jpg' />
<img width="150px" src='imgs/img-5.jpg' />
</div> </div>
## Online access ## Online access
Gitee pages:<https://dy.ttentau.top/>(It is recommended to visit this address in China) Gitee Pages:<https://zyronon.gitee.io/douyin/>(It is recommended to visit this address in China)
Netlify:<https://douyins.netlify.app/> Note: Gitee Pages cannot be updated now, the code is not up to date. If you can circumvent the firewall, I recommend visiting the following address:
[//]: # "Vercel: [https://douyins.vercel.app](https://douyins.vercel.app)" Github Pages:<https://dy.ttentau.top/>
[//]: # "Gitee pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/) (中国地区推荐访问这个地址) " [//]: # "Gitee pages: [https://dy.ttentau.top/](https://dy.ttentau.top/) (中国地区推荐访问这个地址) "
[//]: # "Github pages: [https://zyronon.github.io/douyin/](https://zyronon.github.io/douyin/) " [//]: # "Github pages: [https://zyronon.github.io/douyin/](https://zyronon.github.io/douyin/) "
[//]: # "Vercel和Netlify分别送的100G免费流量已经用完了...🤣" [//]: # "Netlify: [https://douyins.netlify.app/](https://douyins.netlify.app/)"
[//]: # "Vercel: [https://douyins.vercel.app](https://douyins.vercel.app)"
[//]: # "Android Apk: https://github.com/zyronon/douyin/releases" [//]: # "Android Apk: https://github.com/zyronon/douyin/releases"
@ -49,8 +46,10 @@ Netlify:<https://douyins.netlify.app/>
## Link ## Link
\[douyin-vue] One:[200 lines of code to implement a carousel component similar to Swiper.js](https://juejin.cn/post/7360512664317018146) \[Imitation Douyin Series] 1:[200 lines of code to implement a carousel component similar to Swiper.js](https://juejin.cn/post/7360512664317018146)
\[douyin-vue] Second:[Realize the "infinite sliding video" effect on Douyin](https://juejin.cn/post/7361614921519054883) \[Imitation Douyin Series] 2:[Realize the "infinite sliding video" effect on Douyin](https://juejin.cn/post/7361614921519054883)
\[Imitation Douyin Series] Three:[Introduction to using Vue routing and adding transition animations](https://juejin.cn/post/7362528152777130025)
More articles are in preparation... More articles are in preparation...
## run ## run
@ -64,7 +63,8 @@ Note: This project is only suitable for study and research, not for commercial u
### local development ### local development
```bash ```bash
git clone https://github.com/zyronon/douyin.git git clone https://gitee.com/zyronon/douyin.git (中国使用)
https://github.com/zyronon/douyin.git
cd douyin cd douyin
npm install npm install
npm run dev npm run dev
@ -101,7 +101,7 @@ The above content is all public information on the Internet
The project is currently in the early stages of development, and new features are being added continuously. If you have any features or suggestions for the software, please feel free to contact us.`Issues`raised in The project is currently in the early stages of development, and new features are being added continuously. If you have any features or suggestions for the software, please feel free to contact us.`Issues`raised in
If you also like the design ideas of this software, please submit it`PR`, thank you very much for your support! If you also like the design ideas of this software, please submit it`PR`, thank you very much for your support!
## contact me ## 联系我
You can contact my email<a href="mailto:zyronon@163.com">zyronon@163.com</a> You can contact my email<a href="mailto:zyronon@163.com">zyronon@163.com</a>

28
docs/README.es.md
View File

@ -21,25 +21,22 @@
<img width="150px" src='imgs/3.gif' /> <img width="150px" src='imgs/3.gif' />
<img width="150px" src='imgs/4.gif' /> <img width="150px" src='imgs/4.gif' />
<img width="150px" src='imgs/5.gif' /> <img width="150px" src='imgs/5.gif' />
<img width="150px" src='imgs/img-1.jpg' />
<img width="150px" src='imgs/img-2.jpg' />
<img width="150px" src='imgs/img-3.jpg' />
<img width="150px" src='imgs/img-4.jpg' />
<img width="150px" src='imgs/img-5.jpg' />
</div> </div>
## Acceso en linea ## Acceso en linea
Páginas del albergue:<https://dy.ttentau.top/>(Se recomienda visitar esta dirección en China) Páginas de casas rurales:<https://zyronon.gitee.io/douyin/>(Se recomienda visitar esta dirección en China)
Netlificar:<https://douyins.netlify.app/> Nota: Las páginas de Gitee no se pueden actualizar ahora, el código no está actualizado. Si puede eludir el firewall, le recomiendo visitar la siguiente dirección:
[//]: # "Vercel: [https://douyins.vercel.app](https://douyins.vercel.app)" Páginas de Github:<https://dy.ttentau.top/>
[//]: # "Gitee pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/) (中国地区推荐访问这个地址) " [//]: # "Gitee pages: [https://dy.ttentau.top/](https://dy.ttentau.top/) (中国地区推荐访问这个地址) "
[//]: # "Github pages: [https://zyronon.github.io/douyin/](https://zyronon.github.io/douyin/) " [//]: # "Github pages: [https://zyronon.github.io/douyin/](https://zyronon.github.io/douyin/) "
[//]: # "Vercel和Netlify分别送的100G免费流量已经用完了...🤣" [//]: # "Netlify: [https://douyins.netlify.app/](https://douyins.netlify.app/)"
[//]: # "Vercel: [https://douyins.vercel.app](https://douyins.vercel.app)"
[//]: # "Android Apk: https://github.com/zyronon/douyin/releases" [//]: # "Android Apk: https://github.com/zyronon/douyin/releases"
@ -49,8 +46,10 @@ Netlificar:<https://douyins.netlify.app/>
## Enlace ## Enlace
\[douyin-vue] Uno:[200 líneas de código para implementar un componente carrusel similar a Swiper.js](https://juejin.cn/post/7360512664317018146) \[Serie Imitación Douyin] 1:[200 líneas de código para implementar un componente carrusel similar a Swiper.js](https://juejin.cn/post/7360512664317018146)
\[douyin-vue] Segundo:[Realice el efecto de "vídeo deslizante infinito" en Douyin](https://juejin.cn/post/7361614921519054883) \[Serie Imitación Douyin] 2:[Realice el efecto de "vídeo deslizante infinito" en Douyin](https://juejin.cn/post/7361614921519054883)
\[Serie Imitación Douyin] Tres:[Introducción al uso del enrutamiento de Vue y la adición de animaciones de transición](https://juejin.cn/post/7362528152777130025)
Más artículos están en preparación... Más artículos están en preparación...
## correr ## correr
@ -64,7 +63,8 @@ Nota: Este proyecto sólo es apto para estudio e investigación, no para uso com
### desarrollo local ### desarrollo local
```bash ```bash
git clone https://github.com/zyronon/douyin.git git clone https://gitee.com/zyronon/douyin.git (中国使用)
https://github.com/zyronon/douyin.git
cd douyin cd douyin
npm install npm install
npm run dev npm run dev
@ -99,7 +99,7 @@ El contenido anterior es toda información pública en Internet.
## Funciones y sugerencias ## Funciones y sugerencias
El proyecto se encuentra actualmente en las primeras etapas de desarrollo y continuamente se agregan nuevas funciones. Si tiene alguna característica o sugerencia para el software, no dude en contactarnos.`Issues`criado en El proyecto se encuentra actualmente en las primeras etapas de desarrollo y continuamente se agregan nuevas funciones. Si tiene alguna característica o sugerencia para el software, no dude en contactarnos.`Issues`criado en
Si también le gustan las ideas de diseño de este software, envíelas.`PR`，¡Muchas gracias por su apoyo! Si también le gustan las ideas de diseño de este software, envíelas.`PR`, ¡Muchas gracias por tu apoyo!
## contáctame ## contáctame

26
docs/README.fr.md
View File

@ -21,25 +21,22 @@
<img width="150px" src='imgs/3.gif' /> <img width="150px" src='imgs/3.gif' />
<img width="150px" src='imgs/4.gif' /> <img width="150px" src='imgs/4.gif' />
<img width="150px" src='imgs/5.gif' /> <img width="150px" src='imgs/5.gif' />
<img width="150px" src='imgs/img-1.jpg' />
<img width="150px" src='imgs/img-2.jpg' />
<img width="150px" src='imgs/img-3.jpg' />
<img width="150px" src='imgs/img-4.jpg' />
<img width="150px" src='imgs/img-5.jpg' />
</div> </div>
## Accès en ligne ## Accès en ligne
Pages du gîte :<https://dy.ttentau.top/>(Il est recommandé de visiter cette adresse en Chine) Pages du gîte :<https://zyronon.gitee.io/douyin/>(Il est recommandé de visiter cette adresse en Chine)
Netlifier :<https://douyins.netlify.app/> Remarque : Les pages Gitee ne peuvent pas être mises à jour pour le moment, le code n'est pas à jour. Si vous pouvez contourner le pare-feu, je vous recommande de visiter l'adresse suivante :
[//]: # "Vercel: [https://douyins.vercel.app](https://douyins.vercel.app)" Pages GitHub :<https://dy.ttentau.top/>
[//]: # "Gitee pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/) (中国地区推荐访问这个地址) " [//]: # "Gitee pages: [https://dy.ttentau.top/](https://dy.ttentau.top/) (中国地区推荐访问这个地址) "
[//]: # "Github pages: [https://zyronon.github.io/douyin/](https://zyronon.github.io/douyin/) " [//]: # "Github pages: [https://zyronon.github.io/douyin/](https://zyronon.github.io/douyin/) "
[//]: # "Vercel和Netlify分别送的100G免费流量已经用完了...🤣" [//]: # "Netlify: [https://douyins.netlify.app/](https://douyins.netlify.app/)"
[//]: # "Vercel: [https://douyins.vercel.app](https://douyins.vercel.app)"
[//]: # "Android Apk: https://github.com/zyronon/douyin/releases" [//]: # "Android Apk: https://github.com/zyronon/douyin/releases"
@ -49,8 +46,10 @@ Netlifier :<https://douyins.netlify.app/>
## Lien ## Lien
\[douyin-vue] Un :[200行代码实现类似Swiper.js的轮播组件](https://juejin.cn/post/7360512664317018146) \[Série Imitation Douyin] 1 :[200 lignes de code pour implémenter un composant carrousel similaire à Swiper.js](https://juejin.cn/post/7360512664317018146)
\[douyin-vue] Deuxièmement :[Réaliser l'effet "vidéo coulissante infinie" sur Douyin](https://juejin.cn/post/7361614921519054883) \[Série Imitation Douyin] 2 :[Réaliser l'effet "vidéo coulissante infinie" sur Douyin](https://juejin.cn/post/7361614921519054883)
\[Série Imitation Douyin] Trois :[Introduction à l'utilisation du routage Vue et à l'ajout d'animations de transition](https://juejin.cn/post/7362528152777130025)
D'autres articles sont en préparation... D'autres articles sont en préparation...
## courir ## courir
@ -64,7 +63,8 @@ Remarque : ce projet convient uniquement à l'étude et à la recherche, et non
### développement local ### développement local
```bash ```bash
git clone https://github.com/zyronon/douyin.git git clone https://gitee.com/zyronon/douyin.git (中国使用)
https://github.com/zyronon/douyin.git
cd douyin cd douyin
npm install npm install
npm run dev npm run dev

28
docs/README.ja.md
View File

@ -21,25 +21,22 @@
<img width="150px" src='imgs/3.gif' /> <img width="150px" src='imgs/3.gif' />
<img width="150px" src='imgs/4.gif' /> <img width="150px" src='imgs/4.gif' />
<img width="150px" src='imgs/5.gif' /> <img width="150px" src='imgs/5.gif' />
<img width="150px" src='imgs/img-1.jpg' />
<img width="150px" src='imgs/img-2.jpg' />
<img width="150px" src='imgs/img-3.jpg' />
<img width="150px" src='imgs/img-4.jpg' />
<img width="150px" src='imgs/img-5.jpg' />
</div> </div>
## オンラインアクセス ## オンラインアクセス
Gite ページ:[ｈっｔｐｓ：／／ｄｙ。ってんたう。とｐ／](https://dy.ttentau.top/)(中国ではこのアドレスにアクセスすることをお勧めします) ジーティーページ:[ｈっｔｐｓ：／／ｚｙろのん。ぎてえ。いお／どうｙいん／](https://zyronon.gitee.io/douyin/)(中国ではこのアドレスにアクセスすることをお勧めします)
ネットリファイ:[ｈっｔｐｓ：／／どうｙいんｓ。ねｔぃｆｙ。あっｐ／](https://douyins.netlify.app/) 注: コードが最新ではないため、現在 Gitee ページを更新できません。ファイアウォールを回避できる場合は、次のアドレスにアクセスすることをお勧めします。
[//]: # "Vercel: [https://douyins.vercel.app](https://douyins.vercel.app)" Github ページ:[ｈっｔｐｓ：／／ｄｙ。ってんたう。とｐ／](https://dy.ttentau.top/)
[//]: # "Gitee pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/) (中国地区推荐访问这个地址) " [//]: # "Gitee pages: [https://dy.ttentau.top/](https://dy.ttentau.top/) (中国地区推荐访问这个地址) "
[//]: # "Github pages: [https://zyronon.github.io/douyin/](https://zyronon.github.io/douyin/) " [//]: # "Github pages: [https://zyronon.github.io/douyin/](https://zyronon.github.io/douyin/) "
[//]: # "Vercel和Netlify分别送的100G免费流量已经用完了...🤣" [//]: # "Netlify: [https://douyins.netlify.app/](https://douyins.netlify.app/)"
[//]: # "Vercel: [https://douyins.vercel.app](https://douyins.vercel.app)"
[//]: # "Android Apk: https://github.com/zyronon/douyin/releases" [//]: # "Android Apk: https://github.com/zyronon/douyin/releases"
@ -49,8 +46,10 @@ Gite ページ:[ｈっｔｐｓ：／／ｄｙ。ってんたう。とｐ／](ht
## リンク ## リンク
【douyin-vue】一：[Swiper.js に似たカルーセル コンポーネントを実装するための 200 行のコード](https://juejin.cn/post/7360512664317018146) 【模倣同音シリーズ】 1:[Swiper.js に似たカルーセル コンポーネントを実装するための 200 行のコード](https://juejin.cn/post/7360512664317018146)
【douyin-vue】二：[Douyinで「無限スライドビデオ」効果を実現](https://juejin.cn/post/7361614921519054883) 【模倣同音シリーズ】２：[Douyinで「無限スライドビデオ」効果を実現](https://juejin.cn/post/7361614921519054883)
【模倣同音シリーズ】その３：[Vue ルーティングの使用とトランジション アニメーションの追加の概要](https://juejin.cn/post/7362528152777130025)
さらなる記事も準備中です... さらなる記事も準備中です...
## 走る ## 走る
@ -64,7 +63,8 @@ Gite ページ:[ｈっｔｐｓ：／／ｄｙ。ってんたう。とｐ／](ht
### 地域開発 ### 地域開発
```bash ```bash
git clone https://github.com/zyronon/douyin.git git clone https://gitee.com/zyronon/douyin.git (中国使用)
https://github.com/zyronon/douyin.git
cd douyin cd douyin
npm install npm install
npm run dev npm run dev
@ -103,7 +103,7 @@ npm run dev
## 私に連絡して ## 私に連絡して
您可以联系我的邮箱 <a href="mailto:zyronon@163.com">ｚｙろのん＠１６３。こｍ</a> 私のメールアドレスにご連絡いただけます<a href="mailto:zyronon@163.com">ｚｙろのん＠１６３。こｍ</a>
> 私の他のオープンソース プロジェクトを共有してください: > 私の他のオープンソース プロジェクトを共有してください:
> >

4
src/pages/home/components/IndicatorHome.vue
View File

@ -285,12 +285,12 @@ export default {
.tab1-img { .tab1-img {
position: absolute; position: absolute;
@width: 1rem; @width: 12rem;
width: @width; width: @width;
height: @width; height: @width;
margin-left: 4rem; margin-left: 4rem;
transition: all 0.3s; transition: all 0.3s;
margin-top: 7rem; // margin-top: 7rem;
} }
.tab2-img { .tab2-img {